openproject-primer_view_components 0.25.1 → 0.27.0

data/previews/primer/alpha/tab_panels_preview.rb

@@ -10,7 +10,7 @@ module Primer
       # @param align [Symbol] select [left, right]
       def playground(number_of_panels: 3, align: :left)
         render(Primer::Alpha::TabPanels.new(label: "label", align: align)) do |component|
-          Array.new(number_of_panels || 3) do |i|
+          Array.new(number_of_panels&.to_i || 3) do |i|
             component.with_tab(selected: i.zero?, id: "tab-#{i + 1}") do |tab|
               tab.with_panel { "Panel #{i + 1}" }
               tab.with_text { "Tab #{i + 1}" }
@@ -26,7 +26,7 @@ module Primer
       # @snapshot
       def default(number_of_panels: 3, align: :left)
         render(Primer::Alpha::TabPanels.new(label: "label", align: align)) do |component|
-          Array.new(number_of_panels || 3) do |i|
+          Array.new(number_of_panels&.to_i || 3) do |i|
             component.with_tab(selected: i.zero?, id: "tab-#{i + 1}") do |tab|
               tab.with_panel { "Panel #{i + 1}" }
               tab.with_text { "Tab #{i + 1}" }

data/previews/primer/alpha/underline_nav_preview.rb

@@ -15,7 +15,7 @@ module Primer
                                label: label,
                                tag: tag,
                                align: align,
-                               number_of_panels: number_of_panels
+                               number_of_panels: number_of_panels.to_i,
                              })
       end
 
@@ -31,7 +31,7 @@ module Primer
                                label: label,
                                tag: tag,
                                align: align,
-                               number_of_panels: number_of_panels
+                               number_of_panels: number_of_panels.to_i,
                              })
       end
 
@@ -44,7 +44,7 @@ module Primer
       # @param number_of_panels [Integer] number
       def with_icons_and_counters(label: "With icons and counters", number_of_panels: 3, align: :left, tag: :nav)
         render(Primer::Alpha::UnderlineNav.new(label: label, tag: tag, align: align)) do |component|
-          Array.new(number_of_panels || 3) do |i|
+          Array.new(number_of_panels.to_i || 3) do |i|
             component.with_tab(href: "#", selected: i.zero?) do |tab|
               tab.with_icon(icon: :star)
               tab.with_text { "Item #{i + 1}" }

data/previews/primer/alpha/underline_panels_preview.rb

@@ -21,9 +21,44 @@ module Primer
 
       # @label Default options
       #
+      # @snapshot
       # @param number_of_panels [Integer] number
       # @param align [Symbol] select [left, right]
       def default(number_of_panels: 3, align: :left)
+        render(Primer::Alpha::UnderlinePanels.new(label: "Test navigation", align: align)) do |component|
+          Array.new(number_of_panels&.to_i || 3) do |i|
+            component.with_tab(selected: i.zero?, id: "tab-#{i + 1}") do |tab|
+              tab.with_panel { "Panel #{i + 1}" }
+              tab.with_text { "Tab #{i + 1}" }
+            end
+          end
+        end
+      end
+
+      # @label With Icons and Counters
+      #
+      # @snapshot
+      # @param number_of_panels [Integer] number
+      # @param align [Symbol] select [left, right]
+      def with_icons_and_counters(number_of_panels: 3, align: :left)
+        render(Primer::Alpha::UnderlinePanels.new(label: "Test navigation", align: align)) do |component|
+          Array.new(number_of_panels || 3) do |i|
+            component.with_tab(selected: i.zero?, id: "tab-#{i + 1}") do |tab|
+              tab.with_panel { "Panel #{i + 1}" }
+              tab.with_text { "Tab #{i + 1}" }
+              tab.with_icon(icon: :star)
+              tab.with_counter(count: (i + 1) * 5)
+            end
+          end
+        end
+      end
+
+      # @label With Actions
+      #
+      # @snapshot
+      # @param number_of_panels [Integer] number
+      # @param align [Symbol] select [left, right]
+      def with_actions(number_of_panels: 3, align: :right)
         render(Primer::Alpha::UnderlinePanels.new(label: "Test navigation", align: align)) do |component|
           Array.new(number_of_panels || 3) do |i|
             component.with_tab(selected: i.zero?, id: "tab-#{i + 1}") do |tab|
@@ -31,6 +66,9 @@ module Primer
               tab.with_text { "Tab #{i + 1}" }
             end
           end
+          component.with_actions do
+            "Actions Content"
+          end
         end
       end
     end

data/previews/primer/beta/avatar_stack_preview.rb

@@ -13,7 +13,7 @@ module Primer
       # @param tooltip_label text
       def playground(number_of_avatars: 1, tag: :div, align: :left, tooltipped: false, tooltip_label: "This is a tooltip!")
         render(Primer::Beta::AvatarStack.new(tag: tag, align: align, tooltipped: tooltipped, body_arguments: { label: tooltip_label })) do |component|
-          Array.new(number_of_avatars || 1) do
+          Array.new(number_of_avatars&.to_i || 1) do
             component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
           end
         end

data/previews/primer/beta/breadcrumbs_preview.rb

@@ -9,7 +9,7 @@ module Primer
       # @param number_of_links [Integer] number
       def playground(number_of_links: 2)
         render(Primer::Beta::Breadcrumbs.new) do |component|
-          Array.new(number_of_links || 3) do |i|
+          Array.new(number_of_links&.to_i || 3) do |i|
             component.with_item(href: "##{i}") { "Breadcrumb Item #{i + 1}" }
           end
         end
@@ -21,7 +21,7 @@ module Primer
       # @snapshot
       def default(number_of_links: 2)
         render(Primer::Beta::Breadcrumbs.new) do |component|
-          Array.new(number_of_links || 3) do |i|
+          Array.new(number_of_links&.to_i || 3) do |i|
             component.with_item(href: "##{i}") { "Breadcrumb Item #{i + 1}" }
           end
         end

data/previews/primer/beta/nav_list_preview.rb

@@ -139,9 +139,15 @@ module Primer
           component.with_item(
             label: "Really really long label that may wrap, truncate, or appear as a tooltip",
             truncate_label: truncate_label
-          ) do |item|
-            item.with_trailing_visual_icon(icon: :plus)
-          end
+          ) 
+          component.with_item(
+            label: "Really really long label that may wrap, truncate, or appear as a tooltip",
+            truncate_label: truncate_label
+          )
+          component.with_item(
+            label: "Really really long label that may wrap, truncate, or appear as a tooltip",
+            truncate_label: truncate_label
+          )
         end
       end
 

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

@@ -14,12 +14,4 @@
   <% end %>
   <% component.with_action_button(mobile_icon: nil, mobile_label: nil) { "Hide on mobile" } %>
   <% component.with_action_icon_button(icon: "trash", mobile_icon: "trash", label: "Delete", scheme: :danger) %>
-  <% component.with_action_menu(menu_arguments: { anchor_align: :end }, button_arguments: { icon: "op-kebab-vertical", "aria-label": "Some actions" })  do |menu, button| %>
-    <% 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 %>

data/previews/primer/open_project/page_header_preview.rb

@@ -56,6 +56,54 @@ module Primer
         render_with_template(locals: {})
       end
 
+      # @label With a menu inside the actions
+      def menu_actions
+        callback = lambda do |button|
+          button.with_leading_visual_icon(icon: :alert)
+          "Click me"
+        end
+
+        render(Primer::OpenProject::PageHeader.new) do |component|
+          component.with_title { "Great news" }
+          component.with_breadcrumbs([{ href: "/foo", text: "Foo" }, { href: "/bar", text: "Bar" }, "Baz"])
+
+          component.with_action_button(mobile_icon: "star", mobile_label: "Star") do |button|
+             button.with_leading_visual_icon(icon: "star")
+             "Star"
+          end
+          component.with_action_menu(menu_arguments: { anchor_align: :end },
+                                     button_arguments: { button_block: callback }) do |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
+
+      # @label With a dialog inside the actions
+      def dialog_actions
+        callback = lambda do |button|
+          button.with_leading_visual_icon(icon: :plus)
+          "Open dialog"
+        end
+
+        render(Primer::OpenProject::PageHeader.new) do |component|
+          component.with_title { "Great news" }
+          component.with_breadcrumbs([{ href: "/foo", text: "Foo" }, { href: "/bar", text: "Bar" }, "Baz"])
+
+          component.with_action_icon_button(icon: :trash, mobile_icon: :trash, label: "Delete", scheme: :danger)
+
+          component.with_action_dialog(mobile_icon: :plus, mobile_label: "Open dialog",
+                                       dialog_arguments: { id: "my_dialog", title: "A great dialog" },
+                                       button_arguments: { button_block: callback }) do |d|
+            d.with_body { "Hello" }
+          end
+        end
+      end
+
       # @label With leading action (on wide)
       # **Leading action** is only shown on **wide screens** by default.
       # If you want to override that behaviour please use the system_argument: **display**

data/previews/primer/open_project/zen_mode_button_preview.rb

@@ -0,0 +1,22 @@
+# 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 ZenModeButton
+    class ZenModeButtonPreview < ViewComponent::Preview
+      # @label Default
+      # @snapshot
+      def default
+        render(Primer::OpenProject::ZenModeButton.new)
+      end
+
+      # @label Playground
+      def playground
+        render(Primer::OpenProject::ZenModeButton.new)
+      end
+    end
+  end
+end

data/static/arguments.json

@@ -4974,12 +4974,34 @@
     ]
   },
   {
-    "component": "OpenProject::PageHeader::PageHeaderActionMenu",
+    "component": "OpenProject::PageHeader::Dialog",
     "status": "open_project",
     "a11y_reviewed": false,
-    "short_name": "OpenProjectPageHeaderPageHeaderActionMenu",
-    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/page_header/page_header_action_menu.rb",
-    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/page_header/page_header_action_menu/default/",
+    "short_name": "OpenProjectPageHeaderDialog",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/page_header/dialog.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/page_header/dialog/default/",
+    "parameters": [
+      {
+        "name": "dialog_arguments",
+        "type": "Hash",
+        "default": "`{}`",
+        "description": "The arguments accepted by [Dialog](/components/alpha/dialog)."
+      },
+      {
+        "name": "button_arguments",
+        "type": "Hash",
+        "default": "`{}`",
+        "description": "The arguments accepted by [Button](/components/beta/button) or [IconButton](/components/beta/iconbutton), depending on the value of the `icon:` argument."
+      }
+    ]
+  },
+  {
+    "component": "OpenProject::PageHeader::Menu",
+    "status": "open_project",
+    "a11y_reviewed": false,
+    "short_name": "OpenProjectPageHeaderMenu",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/page_header/menu.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/page_header/menu/default/",
     "parameters": [
       {
         "name": "menu_arguments",
@@ -4995,6 +5017,22 @@
       }
     ]
   },
+  {
+    "component": "OpenProject::ZenModeButton",
+    "status": "open_project",
+    "a11y_reviewed": false,
+    "short_name": "OpenProjectZenModeButton",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/zen_mode_button.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/zen_mode_button/default/",
+    "parameters": [
+      {
+        "name": "system_arguments",
+        "type": "Hash",
+        "default": "N/A",
+        "description": "[System arguments](/system-arguments)"
+      }
+    ]
+  },
   {
     "component": "Tooltip",
     "status": "deprecated",

data/static/audited_at.json

@@ -121,7 +121,9 @@
   "Primer::OpenProject::GridLayout::Area": "",
   "Primer::OpenProject::InputGroup": "",
   "Primer::OpenProject::PageHeader": "",
-  "Primer::OpenProject::PageHeader::PageHeaderActionMenu": "",
+  "Primer::OpenProject::PageHeader::Dialog": "",
+  "Primer::OpenProject::PageHeader::Menu": "",
+  "Primer::OpenProject::ZenModeButton": "",
   "Primer::Tooltip": "",
   "Primer::Truncate": ""
 }

data/static/classes.json

@@ -420,6 +420,9 @@
   "Overlay-header": [
     "Primer::Alpha::Dialog"
   ],
+  "Overlay-headerFilter": [
+    "Primer::Alpha::Dialog"
+  ],
   "PageHeader": [
     "Primer::OpenProject::PageHeader"
   ],

data/static/constants.json

@@ -1449,6 +1449,7 @@
       "block",
       "none"
     ],
+    "Dialog": "Primer::OpenProject::PageHeader::Dialog",
     "HEADER_VARIANT_OPTIONS": [
       "medium",
       "large"
@@ -1466,9 +1467,13 @@
       "flex",
       "none"
     ],
-    "PageHeaderActionMenu": "Primer::OpenProject::PageHeader::PageHeaderActionMenu"
+    "Menu": "Primer::OpenProject::PageHeader::Menu"
   },
-  "Primer::OpenProject::PageHeader::PageHeaderActionMenu": {
+  "Primer::OpenProject::PageHeader::Dialog": {
+  },
+  "Primer::OpenProject::PageHeader::Menu": {
+  },
+  "Primer::OpenProject::ZenModeButton": {
   },
   "Primer::Tooltip": {
     "ALIGN_DEFAULT": "default",

data/static/info_arch.json

@@ -6081,6 +6081,19 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/alpha/overlay/overlay_with_header_filter",
+        "name": "overlay_with_header_filter",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ],
     "subcomponents": [
@@ -6142,7 +6155,18 @@
           }
         ],
         "slots": [
-
+          {
+            "name": "filter",
+            "description": "Optional filter slot for adding a filter input to the header.",
+            "parameters": [
+              {
+                "name": "system_arguments",
+                "type": "Hash",
+                "default": "N/A",
+                "description": "{{link_to_system_arguments_docs}}"
+              }
+            ]
+          }
         ],
         "methods": [
 
@@ -9141,7 +9165,33 @@
       {
         "preview_path": "primer/alpha/underline_panels/default",
         "name": "default",
-        "snapshot": "false",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/alpha/underline_panels/with_icons_and_counters",
+        "name": "with_icons_and_counters",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/alpha/underline_panels/with_actions",
+        "name": "with_actions",
+        "snapshot": "true",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -16555,6 +16605,32 @@
           ]
         }
       },
+      {
+        "preview_path": "primer/open_project/page_header/menu_actions",
+        "name": "menu_actions",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/open_project/page_header/dialog_actions",
+        "name": "dialog_actions",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
       {
         "preview_path": "primer/open_project/page_header/leading_action",
         "name": "leading_action",
@@ -16587,18 +16663,58 @@
     ]
   },
   {
-    "fully_qualified_name": "Primer::OpenProject::PageHeader::PageHeaderActionMenu",
-    "description": "A Helper class to create ActionMenus inside the PageHeader action slot",
+    "fully_qualified_name": "Primer::OpenProject::PageHeader::Dialog",
+    "description": "A Helper class to create ActionMenus inside the PageHeader action slot\nDo not use standalone",
+    "accessibility_docs": null,
+    "is_form_component": false,
+    "is_published": true,
+    "requires_js": false,
+    "component": "OpenProject::PageHeader::Dialog",
+    "status": "open_project",
+    "a11y_reviewed": false,
+    "short_name": "OpenProjectPageHeaderDialog",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/page_header/dialog.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/page_header/dialog/default/",
+    "parameters": [
+      {
+        "name": "dialog_arguments",
+        "type": "Hash",
+        "default": "`{}`",
+        "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::Dialog{{/link_to_component}}."
+      },
+      {
+        "name": "button_arguments",
+        "type": "Hash",
+        "default": "`{}`",
+        "description": "The arguments accepted by {{#link_to_component}}Primer::Beta::Button{{/link_to_component}} or {{#link_to_component}}Primer::Beta::IconButton{{/link_to_component}}, depending on the value of the `icon:` argument."
+      }
+    ],
+    "slots": [
+
+    ],
+    "methods": [
+
+    ],
+    "previews": [
+
+    ],
+    "subcomponents": [
+
+    ]
+  },
+  {
+    "fully_qualified_name": "Primer::OpenProject::PageHeader::Menu",
+    "description": "A Helper class to create ActionMenus inside the PageHeader action slot\nIt should not be used standalone",
     "accessibility_docs": null,
     "is_form_component": false,
     "is_published": true,
     "requires_js": false,
-    "component": "OpenProject::PageHeader::PageHeaderActionMenu",
+    "component": "OpenProject::PageHeader::Menu",
     "status": "open_project",
     "a11y_reviewed": false,
-    "short_name": "OpenProjectPageHeaderPageHeaderActionMenu",
-    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/page_header/page_header_action_menu.rb",
-    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/page_header/page_header_action_menu/default/",
+    "short_name": "OpenProjectPageHeaderMenu",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/page_header/menu.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/page_header/menu/default/",
     "parameters": [
       {
         "name": "menu_arguments",
@@ -16626,6 +16742,65 @@
 
     ]
   },
+  {
+    "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.",
+    "accessibility_docs": "Add any accessibility considerations",
+    "is_form_component": false,
+    "is_published": true,
+    "requires_js": false,
+    "component": "OpenProject::ZenModeButton",
+    "status": "open_project",
+    "a11y_reviewed": false,
+    "short_name": "OpenProjectZenModeButton",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/zen_mode_button.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/zen_mode_button/default/",
+    "parameters": [
+      {
+        "name": "system_arguments",
+        "type": "Hash",
+        "default": "N/A",
+        "description": "{{link_to_system_arguments_docs}}"
+      }
+    ],
+    "slots": [
+
+    ],
+    "methods": [
+
+    ],
+    "previews": [
+      {
+        "preview_path": "primer/open_project/zen_mode_button/default",
+        "name": "default",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/open_project/zen_mode_button/playground",
+        "name": "playground",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      }
+    ],
+    "subcomponents": [
+
+    ]
+  },
   {
     "fully_qualified_name": "Primer::Tooltip",
     "description": "`Tooltip` is a wrapper component that will apply a tooltip to the provided content.",