openproject-primer_view_components 0.26.0 → 0.28.0

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

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module Primer
+  module OpenProject
+    class PageHeader
+      # A Helper class to create ActionMenus inside the PageHeader action slot
+      # Do not use standalone
+      class Dialog < Primer::Component
+        status :open_project
+
+        # @param dialog_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::Dialog) %>.
+        # @param button_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Beta::Button) %> or <%= link_to_component(Primer::Beta::IconButton) %>, depending on the value of the `icon:` argument.
+        def initialize(dialog_arguments: {}, button_arguments: {})
+          callback = button_arguments.delete(:button_block)
+
+          @dialog = Primer::Alpha::Dialog.new(**dialog_arguments)
+          @button = @dialog.with_show_button(**button_arguments) do |button|
+            callback&.call(button)
+          end
+        end
+
+        def render_in(view_context, &block)
+          super(view_context) do
+            block&.call(@dialog, @button)
+          end
+        end
+
+        def before_render
+          content
+        end
+
+        def call
+          render(@dialog)
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module Primer
+  module OpenProject
+    class PageHeader
+      # A Helper class to create ActionMenus inside the PageHeader action slot
+      # It should not be used standalone
+      class Menu < Primer::Component
+        status :open_project
+
+        # @param menu_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::ActionMenu) %>.
+        # @param button_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Beta::Button) %> or <%= link_to_component(Primer::Beta::IconButton) %>, depending on the value of the `icon:` argument.
+        def initialize(menu_arguments: {}, button_arguments: {})
+          callback = button_arguments.delete(:button_block)
+
+          @menu = Primer::Alpha::ActionMenu.new(**menu_arguments)
+          @button = @menu.with_show_button(**button_arguments) do |button|
+            callback&.call(button)
+          end
+        end
+
+        def render_in(view_context, &block)
+          super(view_context) do
+            block&.call(@menu, @button)
+          end
+        end
+
+        def before_render
+          content
+        end
+
+        def call
+          render(@menu)
+        end
+      end
+    end
+  end
+end

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

@@ -71,8 +71,18 @@ module Primer
 
           Primer::Beta::Button.new(**system_arguments)
         },
+        zen_mode_button: lambda { |mobile_icon: Primer::OpenProject::ZenModeButton::ZEN_MODE_BUTTON_ICON, mobile_label: Primer::OpenProject::ZenModeButton::ZEN_MODE_BUTTON_LABEL, **system_arguments|
+          deny_tag_argument(**system_arguments)
+          system_arguments = set_action_arguments(system_arguments, scheme: DEFAULT_ACTION_SCHEME)
+          add_option_to_mobile_menu(system_arguments, mobile_icon, mobile_label, DEFAULT_ACTION_SCHEME)
+
+          Primer::OpenProject::ZenModeButton.new(**system_arguments)
+        },
+
         link: lambda { |mobile_icon:, mobile_label:, scheme: DEFAULT_ACTION_SCHEME, **system_arguments|
           deny_tag_argument(**system_arguments)
+          system_arguments[:target] ||= "_top"
+
           system_arguments = set_action_arguments(system_arguments, scheme: scheme)
           add_option_to_mobile_menu(system_arguments, mobile_icon, mobile_label, scheme)
 
@@ -97,7 +107,20 @@ module Primer
             # Add the options individually to the mobile menu in the template
             @desktop_menu_block = block
 
-            PageHeaderActionMenu.new(**system_arguments)
+            Primer::OpenProject::PageHeader::Menu.new(**system_arguments)
+          },
+        },
+        dialog: {
+          renders: lambda { |mobile_icon:, mobile_label:, **system_arguments|
+            deny_tag_argument(**system_arguments)
+
+            # The id will be automatically calculated for the trigger button, so we have to behave the same, for the mobile click to work
+            system_arguments[:button_arguments][:id] = "dialog-show-#{system_arguments[:dialog_arguments][:id]}"
+
+            system_arguments[:button_arguments] = set_action_arguments(system_arguments[:button_arguments])
+            add_option_to_mobile_menu(system_arguments[:button_arguments], mobile_icon, mobile_label, :default)
+
+            Primer::OpenProject::PageHeader::Dialog.new(**system_arguments)
           },
         },
       }
@@ -138,6 +161,8 @@ module Primer
 
           link_arguments[:icon] = fetch_or_fallback(BACK_BUTTON_ICON_OPTIONS, DEFAULT_BACK_BUTTON_ICON)
           link_arguments[:href] = parsed_parent_item[:href]
+          link_arguments[:target] = "_top"
+
           link_arguments[:classes] = class_names(link_arguments[:classes], "PageHeader-parentLink")
           link_arguments[:display] ||= DEFAULT_PARENT_LINK_DISPLAY
 
@@ -156,7 +181,7 @@ module Primer
             if item.is_a?(String)
               breadcrumbs.with_item(href: "#") { item }
             else
-              breadcrumbs.with_item(href: item[:href]) { item[:text] }
+              breadcrumbs.with_item(href: item[:href], target: "_top") { item[:text] }
             end
           end
         end
@@ -183,6 +208,8 @@ module Primer
 
       def render?
         raise ArgumentError, "PageHeader needs a title and a breadcrumb. Please use the `with_title` and `with_breadcrumbs` slot" unless breadcrumbs? || Rails.env.production?
+        raise ArgumentError, "PageHeader allows only a maximum of 5 actions" if actions.count > 5
+
         title? && breadcrumbs?
       end
 
@@ -253,32 +280,6 @@ module Primer
       def anchor_tag_string?(item)
         item.is_a?(String) && item.start_with?("\u003c")
       end
-
-      # A Helper class to create ActionMenus inside the PageHeader action slot
-      class PageHeaderActionMenu < Primer::Component
-        status :open_project
-
-        # @param menu_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::ActionMenu) %>.
-        # @param button_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Beta::Button) %> or <%= link_to_component(Primer::Beta::IconButton) %>, depending on the value of the `icon:` argument.
-        def initialize(menu_arguments: {}, button_arguments: {})
-          @menu = Primer::Alpha::ActionMenu.new(**menu_arguments)
-          @button = @menu.with_show_button(icon: "triangle-down", **button_arguments)
-        end
-
-        def render_in(view_context, &block)
-          super(view_context) do
-            block.call(@menu, @button)
-          end
-        end
-
-        def before_render
-          content
-        end
-
-        def call
-          render(@menu)
-        end
-      end
     end
   end
 end

data/app/components/primer/open_project/zen_mode_button.d.ts

@@ -0,0 +1,13 @@
+declare class ZenModeButtonElement extends HTMLElement {
+    button: HTMLElement;
+    inZenMode: boolean;
+    private deactivateZenMode;
+    private activateZenMode;
+    performAction(): void;
+}
+declare global {
+    interface Window {
+        ZenModeButtonElement: typeof ZenModeButtonElement;
+    }
+}
+export {};

data/app/components/primer/open_project/zen_mode_button.html.erb

@@ -0,0 +1,11 @@
+<%= render(Primer::BaseComponent.new(**@system_arguments)) do %>
+  <%= render(
+          Primer::Beta::IconButton.new(
+            scheme: :default,
+            id: "zenModeButton",
+            icon: ZEN_MODE_BUTTON_ICON,
+            aria: { label: ZEN_MODE_BUTTON_LABEL },
+            data: { target: "zen-mode-button.button", action: "click:zen-mode-button#performAction" }
+          )
+        ) %>
+<% end %>

data/app/components/primer/open_project/zen_mode_button.js

@@ -0,0 +1,45 @@
+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 } from '@github/catalyst';
+let ZenModeButtonElement = class ZenModeButtonElement extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.inZenMode = false;
+    }
+    deactivateZenMode() {
+        this.inZenMode = false;
+        this.button.setAttribute('aria-pressed', 'false');
+        if (document.exitFullscreen) {
+            void document.exitFullscreen();
+        }
+    }
+    activateZenMode() {
+        this.inZenMode = true;
+        this.button.setAttribute('aria-pressed', 'true');
+        if (document.documentElement.requestFullscreen) {
+            void document.documentElement.requestFullscreen();
+        }
+    }
+    performAction() {
+        if (this.inZenMode) {
+            this.deactivateZenMode();
+        }
+        else {
+            this.activateZenMode();
+        }
+    }
+};
+__decorate([
+    target
+], ZenModeButtonElement.prototype, "button", void 0);
+ZenModeButtonElement = __decorate([
+    controller
+], ZenModeButtonElement);
+if (!window.customElements.get('zen-mode-button')) {
+    window.ZenModeButtonElement = ZenModeButtonElement;
+    window.customElements.define('zen-mode-button', ZenModeButtonElement);
+}

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

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module Primer
+  module OpenProject
+    # Add a general description of component here
+    # Add additional usage considerations or best practices that may aid the user to use the component correctly.
+    # @accessibility Add any accessibility considerations
+    class ZenModeButton < Primer::Component
+      status :open_project
+
+      ZEN_MODE_BUTTON_LABEL = I18n.t("label_zen_mode")
+      ZEN_MODE_BUTTON_ICON = "screen-full"
+
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(**system_arguments)
+        @system_arguments = system_arguments
+        @system_arguments[:tag] = "zen-mode-button"
+        @system_arguments[:classes] =
+        class_names(
+          @system_arguments[:classes],
+          "ZenModeButton"
+        )
+      end
+    end
+  end
+end

data/app/components/primer/open_project/zen_mode_button.ts

@@ -0,0 +1,42 @@
+import {controller, target} from '@github/catalyst'
+
+@controller
+class ZenModeButtonElement extends HTMLElement {
+  @target button: HTMLElement
+  inZenMode = false
+
+  private deactivateZenMode() {
+    this.inZenMode = false
+    this.button.setAttribute('aria-pressed', 'false')
+    if (document.exitFullscreen) {
+      void document.exitFullscreen()
+    }
+  }
+
+  private activateZenMode() {
+    this.inZenMode = true
+    this.button.setAttribute('aria-pressed', 'true')
+    if (document.documentElement.requestFullscreen) {
+      void document.documentElement.requestFullscreen()
+    }
+  }
+
+  public performAction() {
+    if (this.inZenMode) {
+      this.deactivateZenMode()
+    } else {
+      this.activateZenMode()
+    }
+  }
+}
+
+declare global {
+  interface Window {
+    ZenModeButtonElement: typeof ZenModeButtonElement
+  }
+}
+
+if (!window.customElements.get('zen-mode-button')) {
+  window.ZenModeButtonElement = ZenModeButtonElement
+  window.customElements.define('zen-mode-button', ZenModeButtonElement)
+}

data/app/components/primer/primer.d.ts

@@ -23,3 +23,4 @@ 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';
+import './open_project/zen_mode_button';

data/app/components/primer/primer.js

@@ -23,3 +23,4 @@ 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';
+import './open_project/zen_mode_button';

data/app/components/primer/primer.ts

@@ -23,3 +23,4 @@ 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'
+import './open_project/zen_mode_button'

data/lib/primer/view_components/version.rb

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

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,70 @@ 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 a ZenModeButton inside the actions
+      # The missing label will be resolved automatically when included into the core
+      def zen_mode_button_actions
+        render(Primer::OpenProject::PageHeader.new) do |component|
+          component.with_title { "Great news" }
+          component.with_breadcrumbs([{ href: "/foo", text: "Foo" }, { href: "/bar", text: "Bar" }, "Baz"])
+
+          # The missing label will be resolved automatically when included into the core
+          component.with_action_zen_mode_button
+          component.with_action_button(mobile_icon: "plus", mobile_label: "Meeting", scheme: :primary) do |button|
+            button.with_leading_visual_icon(icon: "plus")
+            "Meeting"
+          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/constants.json

@@ -1449,6 +1449,7 @@
       "block",
       "none"
     ],
+    "Dialog": "Primer::OpenProject::PageHeader::Dialog",
     "HEADER_VARIANT_OPTIONS": [
       "medium",
       "large"
@@ -1466,9 +1467,15 @@
       "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": {
+    "ZEN_MODE_BUTTON_ICON": "screen-full",
+    "ZEN_MODE_BUTTON_LABEL": "Translation missing: en.label_zen_mode"
   },
   "Primer::Tooltip": {
     "ALIGN_DEFAULT": "default",