openproject-primer_view_components 0.24.0 → 0.25.1

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

@@ -1,24 +1,25 @@
 <%= render(Primer::OpenProject::PageHeader.new) do |component| %>
   <% component.with_title do %>
-    A title
+    Great news
   <% end %>
   <% component.with_description do %>
-    A description with actions
+    This example lists all possible actions of a PageHeader. Of course, you will most likely never need all of them on the same page as it is shown here.
   <% end %>
-  <% component.with_action do %>
-    <%= render(Primer::Beta::IconButton.new(icon: 'pencil', 'aria-label': 'Edit')) %>
+  <% component.with_breadcrumbs([{ href: "/foo", text: "Foo" }, { href: "/bar", text: "Bar" }, "Baz"]) %>
+  <% component.with_action_text { "An additional hint" } %>
+  <% component.with_action_link(mobile_icon: "link", mobile_label: "Community", href: "https://community.openproject.com", target: "_blank") { "Go to community" } %>
+  <% component.with_action_button(mobile_icon: "star", mobile_label: "Star") do |button|%>
+      <% button.with_leading_visual_icon(icon: "star") %>
+      Star
   <% end %>
-  <% component.with_action do %>
-    <%= render(Primer::Alpha::ActionMenu.new) do |menu| %>
-      <% menu.with_show_button { "Menu" } %>
-      <% menu.with_item(label: "Item", tag: :button, value: "") %>
-      <% menu.with_item(
-           label: "Show dialog",
-           tag: :button,
-           content_arguments: { "data-show-dialog-id": "my-dialog" },
-           value: "",
-           scheme: :danger
-         ) %>
+  <% 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/playground.html.erb

@@ -1,32 +1,17 @@
 <%= render Primer::OpenProject::PageHeader.new do |header| %>
   <%= header.with_title(variant: variant) { title } %>
   <%= header.with_description { description } %>
-  <%= header.with_leading_action(icon: with_leading_action, href: '#', 'aria-label': "A leading action") if with_leading_action %>
-  <%= header.with_breadcrumbs(breadcrumb_items) if with_breadcrumbs %>
-  <%= header.with_parent_link(href: "#") { "Parent link" } if with_parent_link %>
+  <%= header.with_leading_action(icon: with_leading_action, href: '#', 'aria-label': "A leading action") if with_leading_action && with_leading_action != :none %>
+  <%= header.with_breadcrumbs(breadcrumb_items) %>
   <% if with_actions %>
-    <% header.with_action do %>
-      <%= render(Primer::Alpha::ActionMenu.new) do |component| %>
-        <% component.with_show_button { "Menu" } %>
-        <% component.with_item(label: "Item", tag: :button, value: "") %>
-        <% component.with_item(
-             label: "Show dialog",
-             tag: :button,
-             content_arguments: { "data-show-dialog-id": "my-dialog" },
-             value: "",
-             scheme: :danger
-           ) %>
+    <% header.with_action_icon_button(icon: 'pencil', mobile_icon: 'pencil', label: 'Edit') %>
+    <% header.with_action_menu(menu_arguments: { anchor_align: :end }, button_arguments: { icon: "op-kebab-vertical", "aria-label": "Menu" }) do |menu, button| %>
+      <% menu.with_item(label: "Subitem 1") do |item| %>
+        <% item.with_leading_visual_icon(icon: :unlock) %>
+      <% end %>
+      <% menu.with_item(label: "Subitem 2", scheme: :danger) do |item| %>
+        <% item.with_leading_visual_icon(icon: :trash) %>
       <% end %>
-    <% end %>
-  <% end %>
-  <% if with_context_bar_actions %>
-    <% header.with_context_bar_action do %>
-      <%= render(Primer::Beta::IconButton.new(
-        scheme: :default,
-        size: :small,
-        icon: "pencil",
-        "aria-label": "A meaningful label"
-      )) %>
     <% end %>
   <% end %>
 <% end %>

data/previews/primer/open_project/page_header_preview.rb

@@ -8,9 +8,12 @@ module Primer
       # @label Default
       # @snapshot
       def default
+        breadcrumb_items = [{ href: "/foo", text: "Grandparent" }, { href: "/bar", text: "Parent" }, "Hello"]
+
         render(Primer::OpenProject::PageHeader.new) do |header|
           header.with_title { "Hello" }
           header.with_description { "Last updated 5 minutes ago by XYZ." }
+          header.with_breadcrumbs(breadcrumb_items)
         end
       end
 
@@ -19,19 +22,13 @@ module Primer
       # @param title [String] text
       # @param description [String] text
       # @param with_leading_action [Symbol] octicon
-      # @param with_breadcrumbs [Boolean]
       # @param with_actions [Boolean]
-      # @param with_context_bar_actions [Boolean]
-      # @param with_parent_link [Boolean]
       def playground(
-        variant: :large,
+        variant: :medium,
         title: "Hello",
         description: "Last updated 5 minutes ago by XYZ.",
-        with_leading_action: :"arrow-left",
-        with_breadcrumbs: false,
-        with_actions: false,
-        with_context_bar_actions: false,
-        with_parent_link: false
+        with_leading_action: :"none",
+        with_actions: true
       )
         breadcrumb_items = [{ href: "/foo", text: "Foo" }, { href: "/bar", text: "Bar" }, "Baz"]
 
@@ -39,18 +36,18 @@ module Primer
                                        title: title,
                                        description: description,
                                        with_leading_action: with_leading_action,
-                                       with_breadcrumbs: with_breadcrumbs,
-                                       with_parent_link: with_parent_link,
                                        with_actions: with_actions,
-                                       with_context_bar_actions: with_context_bar_actions,
                                        breadcrumb_items: breadcrumb_items })
       end
 
       # @label Large title
       def large_title
+        breadcrumb_items = [{ href: "/foo", text: "Foo" }, { href: "/bar", text: "Bar" }, "Baz"]
+
         render(Primer::OpenProject::PageHeader.new) do |header|
           header.with_title(variant: :large) { "Hello" }
           header.with_description { "Last updated 5 minutes ago by XYZ." }
+          header.with_breadcrumbs(breadcrumb_items)
         end
       end
 
@@ -67,16 +64,18 @@ module Primer
       # @param href [String] text
       # @param icon [Symbol] octicon
       def leading_action(href: "#", icon: :"arrow-left")
+        breadcrumb_items = [{ href: "/foo", text: "Foo" }, { href: "/bar", text: "Bar" }, "Baz"]
+
         render(Primer::OpenProject::PageHeader.new) do |header|
           header.with_title { "Hello" }
           header.with_leading_action(icon: icon, href: href, 'aria-label': "Back")
+          header.with_breadcrumbs(breadcrumb_items)
         end
       end
 
-      # @label With breadcrumbs (on wide)
+      # @label With breadcrumbs
       # **Breadcrumbs** are only shown on **wider than narrow screens** by default.
-      # If you want to override that behaviour please use the system_argument: **display**
-      # e.g. **component.with\_breadcrumbs(display: [:block, :block])**
+      # A parent link is shown instead in narrow screens
       #
       def breadcrumbs
         breadcrumb_items = [
@@ -89,27 +88,6 @@ module Primer
           header.with_breadcrumbs(breadcrumb_items)
         end
       end
-
-      # @label With parent link (on narrow)
-      # **Parent link** is only shown on **narrow screens** by default.
-      # If you want to override that behaviour please use the system_argument: **display**
-      # e.g. **component.with\_parent\_link(display: [:block, :block])**
-      #
-      def parent_link
-        render(Primer::OpenProject::PageHeader.new) do |header|
-          header.with_title { "A title" }
-          header.with_parent_link(href: "test") { "Parent link" }
-        end
-      end
-
-      # @label With context bar actions (on narrow)
-      # **Context bar actions** are only shown on **narrow screens** by default.
-      # If you want to override that behaviour please use the system_argument: **display**
-      # e.g. **component.with\_context\_bar\_actions(display: [:block, :block])**
-      #
-      def context_bar_actions
-        render_with_template(locals: {})
-      end
     end
   end
 end

data/static/arguments.json

@@ -3760,7 +3760,7 @@
         "name": "scheme",
         "type": "Symbol",
         "default": "`:default`",
-        "description": "One of `:danger`, `:default`, or `:invisible`."
+        "description": "One of `:danger`, `:default`, `:invisible`, `:primary`, or `:secondary`."
       },
       {
         "name": "size",
@@ -4959,7 +4959,40 @@
     "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/page_header.rb",
     "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/page_header/default/",
     "parameters": [
-
+      {
+        "name": "mobile_menu_label",
+        "type": "String",
+        "default": "`I18n.t(\"label_more\")`",
+        "description": "The tooltip label of the mobile menu"
+      },
+      {
+        "name": "system_arguments",
+        "type": "Hash",
+        "default": "N/A",
+        "description": "[System arguments](/system-arguments)"
+      }
+    ]
+  },
+  {
+    "component": "OpenProject::PageHeader::PageHeaderActionMenu",
+    "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/",
+    "parameters": [
+      {
+        "name": "menu_arguments",
+        "type": "Hash",
+        "default": "`{}`",
+        "description": "The arguments accepted by [ActionMenu](/components/alpha/actionmenu)."
+      },
+      {
+        "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."
+      }
     ]
   },
   {

data/static/audited_at.json

@@ -121,6 +121,7 @@
   "Primer::OpenProject::GridLayout::Area": "",
   "Primer::OpenProject::InputGroup": "",
   "Primer::OpenProject::PageHeader": "",
+  "Primer::OpenProject::PageHeader::PageHeaderActionMenu": "",
   "Primer::Tooltip": "",
   "Primer::Truncate": ""
 }

data/static/classes.json

@@ -423,6 +423,9 @@
   "PageHeader": [
     "Primer::OpenProject::PageHeader"
   ],
+  "PageHeader--singleAction": [
+    "Primer::OpenProject::PageHeader"
+  ],
   "PageHeader-actions": [
     "Primer::OpenProject::PageHeader"
   ],

data/static/constants.json

@@ -938,11 +938,15 @@
     "DEFAULT_SCHEME": "default",
     "SCHEME_MAPPINGS": {
       "default": "Button--secondary",
+      "primary": "Button--primary",
+      "secondary": "Button--secondary",
       "danger": "Button--danger",
       "invisible": "Button--invisible"
     },
     "SCHEME_OPTIONS": [
       "default",
+      "primary",
+      "secondary",
       "danger",
       "invisible"
     ]
@@ -1430,15 +1434,12 @@
       "chevron-left",
       "triangle-left"
     ],
+    "DEFAULT_ACTION_SCHEME": "default",
     "DEFAULT_BACK_BUTTON_ICON": "arrow-left",
     "DEFAULT_BREADCRUMBS_DISPLAY": [
       "none",
       "flex"
     ],
-    "DEFAULT_CONTEXT_BAR_ACTIONS_DISPLAY": [
-      "flex",
-      "none"
-    ],
     "DEFAULT_HEADER_VARIANT": "medium",
     "DEFAULT_LEADING_ACTION_DISPLAY": [
       "none",
@@ -1460,7 +1461,14 @@
       "h4",
       "h5",
       "h6"
-    ]
+    ],
+    "MORE_MENU_DISPLAY": [
+      "flex",
+      "none"
+    ],
+    "PageHeaderActionMenu": "Primer::OpenProject::PageHeader::PageHeaderActionMenu"
+  },
+  "Primer::OpenProject::PageHeader::PageHeaderActionMenu": {
   },
   "Primer::Tooltip": {
     "ALIGN_DEFAULT": "default",

data/static/info_arch.json

@@ -3440,6 +3440,19 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/alpha/dialog/initally_open",
+        "name": "initally_open",
+        "snapshot": "interactive",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ],
     "subcomponents": [
@@ -8778,6 +8791,110 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/alpha/tooltip/tooltip_n",
+        "name": "tooltip_n",
+        "snapshot": "interactive",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/alpha/tooltip/tooltip_s",
+        "name": "tooltip_s",
+        "snapshot": "interactive",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/alpha/tooltip/tooltip_e",
+        "name": "tooltip_e",
+        "snapshot": "interactive",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/alpha/tooltip/tooltip_w",
+        "name": "tooltip_w",
+        "snapshot": "interactive",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/alpha/tooltip/tooltip_se",
+        "name": "tooltip_se",
+        "snapshot": "interactive",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/alpha/tooltip/tooltip_sw",
+        "name": "tooltip_sw",
+        "snapshot": "interactive",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/alpha/tooltip/tooltip_ne",
+        "name": "tooltip_ne",
+        "snapshot": "interactive",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/alpha/tooltip/tooltip_nw",
+        "name": "tooltip_nw",
+        "snapshot": "interactive",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ],
     "subcomponents": [
@@ -12329,7 +12446,7 @@
         "name": "scheme",
         "type": "Symbol",
         "default": "`:default`",
-        "description": "One of `:danger`, `:default`, or `:invisible`."
+        "description": "One of `:danger`, `:default`, `:invisible`, `:primary`, or `:secondary`."
       },
       {
         "name": "size",
@@ -12426,6 +12543,19 @@
           ]
         }
       },
+      {
+        "preview_path": "primer/beta/icon_button/primary",
+        "name": "primary",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
       {
         "preview_path": "primer/beta/icon_button/danger",
         "name": "danger",
@@ -16268,7 +16398,18 @@
     "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/page_header.rb",
     "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/page_header/default/",
     "parameters": [
-
+      {
+        "name": "mobile_menu_label",
+        "type": "String",
+        "default": "`I18n.t(\"label_more\")`",
+        "description": "The tooltip label of the mobile menu"
+      },
+      {
+        "name": "system_arguments",
+        "type": "Hash",
+        "default": "N/A",
+        "description": "{{link_to_system_arguments_docs}}"
+      }
     ],
     "slots": [
       {
@@ -16308,18 +16449,6 @@
           }
         ]
       },
-      {
-        "name": "context_bar_actions",
-        "description": "Context Bar Actions\nBy default shown on narrow screens. Can be overridden with system_argument: display",
-        "parameters": [
-          {
-            "name": "system_arguments",
-            "type": "Hash",
-            "default": "N/A",
-            "description": "{{link_to_system_arguments_docs}}"
-          }
-        ]
-      },
       {
         "name": "leading_action",
         "description": "Optional leading action prepend the title\nBy default shown on wider screens. Can be overridden with system_argument: display",
@@ -16338,18 +16467,6 @@
           }
         ]
       },
-      {
-        "name": "parent_link",
-        "description": "Optional parent link in the context area\nBy default shown on narrow screens. Can be overridden with system_argument: display",
-        "parameters": [
-          {
-            "name": "system_arguments",
-            "type": "Hash",
-            "default": "N/A",
-            "description": "{{link_to_system_arguments_docs}}"
-          }
-        ]
-      },
       {
         "name": "breadcrumbs",
         "description": "Optional breadcrumbs above the title row\nBy default shown on wider screens. Can be overridden with system_argument: display",
@@ -16463,33 +16580,47 @@
             "color-contrast"
           ]
         }
-      },
+      }
+    ],
+    "subcomponents": [
+
+    ]
+  },
+  {
+    "fully_qualified_name": "Primer::OpenProject::PageHeader::PageHeaderActionMenu",
+    "description": "A Helper class to create ActionMenus inside the PageHeader action slot",
+    "accessibility_docs": null,
+    "is_form_component": false,
+    "is_published": true,
+    "requires_js": false,
+    "component": "OpenProject::PageHeader::PageHeaderActionMenu",
+    "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/",
+    "parameters": [
       {
-        "preview_path": "primer/open_project/page_header/parent_link",
-        "name": "parent_link",
-        "snapshot": "false",
-        "skip_rules": {
-          "wont_fix": [
-            "region"
-          ],
-          "will_fix": [
-            "color-contrast"
-          ]
-        }
+        "name": "menu_arguments",
+        "type": "Hash",
+        "default": "`{}`",
+        "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::ActionMenu{{/link_to_component}}."
       },
       {
-        "preview_path": "primer/open_project/page_header/context_bar_actions",
-        "name": "context_bar_actions",
-        "snapshot": "false",
-        "skip_rules": {
-          "wont_fix": [
-            "region"
-          ],
-          "will_fix": [
-            "color-contrast"
-          ]
-        }
+        "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": [