openproject-primer_view_components 0.24.0 → 0.25.0

data/app/components/primer/primer.ts

@@ -22,3 +22,4 @@ import '../../../lib/primer/forms/primer_multi_input'
 import '../../../lib/primer/forms/primer_text_field'
 import '../../../lib/primer/forms/toggle_switch_input'
 import './alpha/action_menu/action_menu_element'
+import './open_project/page_header_element'

data/lib/primer/view_components/version.rb

@@ -5,7 +5,7 @@ module Primer
   module ViewComponents
     module VERSION
       MAJOR = 0
-      MINOR = 24
+      MINOR = 25
       PATCH = 0
 
       STRING = [MAJOR, MINOR, PATCH].join(".")

data/previews/primer/alpha/action_menu_preview.rb

@@ -326,7 +326,7 @@ module Primer
       # @label In Scoll container
       #
       def in_scroll_container
-        render_with_template()
+        render_with_template
       end
 
 

data/previews/primer/alpha/tooltip_preview/tooltip_e.html.erb

@@ -0,0 +1,6 @@
+<div style="display: grid; place-content: center; margin-top: 4rem;">
+    <%= render(Primer::Beta::Button.new(id: "tooltip-e")) do |b| %>
+      <% b.with_tooltip(text: "This is a tooltip", direction: :e) %>
+      Tooltip east
+    <% end %>
+</div>

data/previews/primer/alpha/tooltip_preview/tooltip_n.html.erb

@@ -0,0 +1,6 @@
+<div style="display: grid; place-content: center; margin-top: 4rem;">
+    <%= render(Primer::Beta::Button.new(id: "tooltip-n")) do |b| %>
+      <% b.with_tooltip(text: "This is a tooltip", direction: :n) %>
+      Tooltip north
+    <% end %>
+</div>

data/previews/primer/alpha/tooltip_preview/tooltip_ne.html.erb

@@ -0,0 +1,6 @@
+<div style="display: grid; place-content: center; margin-top: 4rem;">
+    <%= render(Primer::Beta::Button.new(id: "tooltip-ne")) do |b| %>
+      <% b.with_tooltip(text: "This is a tooltip", direction: :ne) %>
+      Tooltip northeast
+    <% end %>
+</div>

data/previews/primer/alpha/tooltip_preview/tooltip_nw.html.erb

@@ -0,0 +1,6 @@
+<div style="display: grid; place-content: center; margin-top: 4rem;">
+    <%= render(Primer::Beta::Button.new(id: "tooltip-nw")) do |b| %>
+      <% b.with_tooltip(text: "This is a tooltip", direction: :nw) %>
+      Tooltip northwest
+    <% end %>
+</div>

data/previews/primer/alpha/tooltip_preview/tooltip_s.html.erb

@@ -0,0 +1,6 @@
+<div style="display: grid; place-content: center; margin-top: 4rem;">
+    <%= render(Primer::Beta::Button.new(id: "tooltip-s")) do |b| %>
+      <% b.with_tooltip(text: "This is a tooltip", direction: :s) %>
+      Tooltip south
+    <% end %>
+</div>

data/previews/primer/alpha/tooltip_preview/tooltip_se.html.erb

@@ -0,0 +1,6 @@
+<div style="display: grid; place-content: center; margin-top: 4rem;">
+    <%= render(Primer::Beta::Button.new(id: "tooltip-se")) do |b| %>
+      <% b.with_tooltip(text: "This is a tooltip", direction: :se) %>
+      Tooltip southeast
+    <% end %>
+</div>

data/previews/primer/alpha/tooltip_preview/tooltip_sw.html.erb

@@ -0,0 +1,6 @@
+<div style="display: grid; place-content: center; margin-top: 4rem;">
+    <%= render(Primer::Beta::Button.new(id: "tooltip-sw")) do |b| %>
+      <% b.with_tooltip(text: "This is a tooltip", direction: :sw) %>
+      Tooltip southwest
+    <% end %>
+</div>

data/previews/primer/alpha/tooltip_preview/tooltip_w.html.erb

@@ -0,0 +1,6 @@
+<div style="display: grid; place-content: center; margin-top: 4rem;">
+    <%= render(Primer::Beta::Button.new(id: "tooltip-w")) do |b| %>
+      <% b.with_tooltip(text: "This is a tooltip", direction: :w) %>
+      Tooltip west
+    <% end %>
+</div>

data/previews/primer/alpha/tooltip_preview.rb

@@ -88,6 +88,86 @@ module Primer
       def tooltip_with_dialog_moving_focus_to_input
         render_with_template(locals: {})
       end
+
+      # @label Direction: North
+      # @snapshot interactive
+      def tooltip_n(type: :description)
+        render_with_template(
+          locals: {
+            type: type,
+          }
+        )
+      end
+
+      # @label Direction: South
+      # @snapshot interactive
+      def tooltip_s(type: :description)
+        render_with_template(
+          locals: {
+            type: type,
+          }
+        )
+      end
+
+      # @label Direction: East
+      # @snapshot interactive
+      def tooltip_e(type: :description)
+        render_with_template(
+          locals: {
+            type: type,
+          }
+        )
+      end
+
+      # @label Direction: West
+      # @snapshot interactive
+      def tooltip_w(type: :description)
+        render_with_template(
+          locals: {
+            type: type,
+          }
+        )
+      end
+
+      # @label Direction: Southeast
+      # @snapshot interactive
+      def tooltip_se(type: :description)
+        render_with_template(
+          locals: {
+            type: type,
+          }
+        )
+      end
+
+      # @label Direction: Southwest
+      # @snapshot interactive
+      def tooltip_sw(type: :description)
+        render_with_template(
+          locals: {
+            type: type,
+          }
+        )
+      end
+
+      # @label Direction: Northeast
+      # @snapshot interactive
+      def tooltip_ne(type: :description)
+        render_with_template(
+          locals: {
+            type: type,
+          }
+        )
+      end
+
+      # @label Direction: Northwest
+      # @snapshot interactive
+      def tooltip_nw(type: :description)
+        render_with_template(
+          locals: {
+            type: type,
+          }
+        )
+      end
     end
   end
 end

data/previews/primer/open_project/border_grid_preview.rb

@@ -21,7 +21,7 @@ module Primer
       # @label Default Options
       #
       # @snapshot
-      def default()
+      def default
         render(Primer::OpenProject::BorderGrid.new) do |grid|
           grid.with_row { "Block 1" }
           grid.with_row { "Block 2" }
@@ -30,7 +30,7 @@ module Primer
       end
 
       # @label Spacious
-      def spacious()
+      def spacious
         render(Primer::OpenProject::BorderGrid.new(spacious: true)) do |grid|
           grid.with_row { "Block 1" }
           grid.with_row { "Block 2" }

data/previews/primer/open_project/input_group_preview.rb

@@ -11,7 +11,7 @@ module Primer
       # @snapshot
       def default
         render(Primer::OpenProject::InputGroup.new) do |menu|
-          menu.with_text_input(name: 'a name', label: 'My input group', value: "Copyable value")
+          menu.with_text_input(name: "a name", label: "My input group", value: "Copyable value")
           menu.with_trailing_action_clipboard_copy_button(id: "button", value: "Copyable value", aria: { label: "Copy some text" })
         end
       end
@@ -24,13 +24,13 @@ module Primer
       # @param input_width [Symbol] select [auto, small, medium, large, xlarge, xxlarge]
       def playground(
         trailing_action: :clipboardCopy,
-        value: 'Copyable value',
+        value: "Copyable value",
         visually_hide_label: false,
         readonly: true,
         input_width: :medium
       )
         render(Primer::OpenProject::InputGroup.new(input_width: input_width)) do |menu|
-          menu.with_text_input(name: 'Test', label: 'My input group', visually_hide_label: visually_hide_label, value: value, readonly: readonly)
+          menu.with_text_input(name: "Test", label: "My input group", visually_hide_label: visually_hide_label, value: value, readonly: readonly)
 
           case trailing_action
           when :icon
@@ -46,7 +46,7 @@ module Primer
       # @label With icon button
       def icon_button
         render(Primer::OpenProject::InputGroup.new) do |menu|
-          menu.with_text_input(name: 'a name', label: 'My input group', value: "Some value")
+          menu.with_text_input(name: "a name", label: "My input group", value: "Some value")
           menu.with_trailing_action_icon(icon: :check, aria: { label: "Successful" })
         end
       end
@@ -54,7 +54,7 @@ module Primer
       # @label With a small input
       def small_input_width
         render(Primer::OpenProject::InputGroup.new(input_width: :small)) do |menu|
-          menu.with_text_input(name: 'a name', label: 'My input group', value: "Some value")
+          menu.with_text_input(name: "a name", label: "My input group", value: "Some value")
           menu.with_trailing_action_clipboard_copy_button(id: "button-4", value: "Some value", aria: { label: "Copy some text" })
         end
       end

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

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

@@ -1430,15 +1430,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 +1457,14 @@
       "h4",
       "h5",
       "h6"
-    ]
+    ],
+    "MORE_MENU_DISPLAY": [
+      "flex",
+      "none"
+    ],
+    "PageHeaderActionMenu": "Primer::OpenProject::PageHeader::PageHeaderActionMenu"
+  },
+  "Primer::OpenProject::PageHeader::PageHeaderActionMenu": {
   },
   "Primer::Tooltip": {
     "ALIGN_DEFAULT": "default",