openproject-primer_view_components 0.39.1 → 0.41.0

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

@@ -20,7 +20,7 @@
   <div class="PageHeader-titleBar">
     <%= leading_action %>
     <%= title %>
-    <% if actions.any? %>
+    <% if actions.any? && show_state? %>
       <div class="PageHeader-actions">
         <% actions.each do |action| %>
           <%= action %>

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

@@ -4,9 +4,6 @@ module Primer
   module OpenProject
     # A ViewComponent PageHeader inspired by the primer react variant
     class PageHeader < Primer::Component
-      HEADING_TAG_OPTIONS = [:h1, :h2, :h3, :h4, :h5, :h6].freeze
-      HEADING_TAG_FALLBACK = :h1
-
       DEFAULT_HEADER_VARIANT = :medium
       HEADER_VARIANT_OPTIONS = [
         DEFAULT_HEADER_VARIANT,
@@ -27,21 +24,24 @@ module Primer
       DEFAULT_BREADCRUMBS_DISPLAY = [:none, :flex].freeze
       DEFAULT_PARENT_LINK_DISPLAY = [:block, :none].freeze
 
+      STATE_DEFAULT = :show
+      STATE_EDIT = :edit
+      STATE_OPTIONS = [STATE_DEFAULT, STATE_EDIT].freeze
+
       status :open_project
 
       # The title of the page header
       #
       # @param tag [Symbol] <%= one_of(Primer::Beta::Heading::TAG_OPTIONS) %>
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      renders_one :title, lambda { |tag: HEADING_TAG_FALLBACK, variant: DEFAULT_HEADER_VARIANT, **system_arguments|
-        system_arguments[:tag] = fetch_or_fallback(HEADING_TAG_OPTIONS, tag, HEADING_TAG_FALLBACK)
+      renders_one :title, lambda { |variant: DEFAULT_HEADER_VARIANT, **system_arguments|
         system_arguments[:classes] = class_names(
           system_arguments[:classes],
           "PageHeader-title",
           "PageHeader-title--#{variant}"
         )
 
-        Primer::BaseComponent.new(**system_arguments)
+        Primer::OpenProject::PageHeader::Title.new(state: @state, **system_arguments)
       }
 
       # Optional description below the title row
@@ -235,7 +235,7 @@ module Primer
 
       # @param mobile_menu_label [String] The tooltip label of the mobile menu
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      def initialize(mobile_menu_label: I18n.t("label_more"), **system_arguments)
+      def initialize(mobile_menu_label: I18n.t("label_more"), state: STATE_DEFAULT, **system_arguments)
         @system_arguments = deny_tag_argument(**system_arguments)
         @mobile_menu_label = mobile_menu_label
 
@@ -246,6 +246,8 @@ module Primer
             "PageHeader"
           )
 
+        @state = fetch_or_fallback(STATE_OPTIONS, state, STATE_DEFAULT)
+
         @mobile_action_menu = Primer::Alpha::ActionMenu.new(
           display: MOBILE_ACTIONS_DISPLAY,
           anchor_align: :end
@@ -263,6 +265,10 @@ module Primer
         actions.count > 1
       end
 
+      def show_state?
+        @state == STATE_DEFAULT
+      end
+
       private
 
       def set_action_arguments(system_arguments, scheme: nil)

data/lib/primer/view_components/version.rb

@@ -5,8 +5,8 @@ module Primer
   module ViewComponents
     module VERSION
       MAJOR = 0
-      MINOR = 39
-      PATCH = 1
+      MINOR = 41
+      PATCH = 0
 
       STRING = [MAJOR, MINOR, PATCH].join(".")
     end

data/previews/primer/alpha/toggle_switch_preview.rb

@@ -58,6 +58,10 @@ module Primer
       def with_bad_csrf_token
         render(Primer::Alpha::ToggleSwitch.new(src: UrlHelpers.toggle_switch_index_path, csrf_token: "i_am_a_criminal"))
       end
+
+      def with_turbo
+        render(Primer::Alpha::ToggleSwitch.new(src: UrlHelpers.toggle_switch_index_path, turbo: true))
+      end
     end
   end
 end

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

@@ -1,5 +1,10 @@
-<%= render Primer::OpenProject::PageHeader.new do |header| %>
-  <%= header.with_title(variant: variant) { title } %>
+<%= render Primer::OpenProject::PageHeader.new(state: in_edit_state ? :edit : :show) do |header| %>
+  <%=  header.with_title(variant: variant) do |t| %>
+    <% if in_edit_state %>
+      <%= t.with_editable_form(model: nil, update_path: "/foo", cancel_path: "/bar") %>
+    <% end %>
+    <%= title %>
+  <% end %>
   <%= header.with_description { description } %>
   <%= 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) %>

data/previews/primer/open_project/page_header_preview.rb

@@ -24,13 +24,15 @@ module Primer
       # @param with_leading_action [Symbol] octicon
       # @param with_actions [Boolean]
       # @param with_tab_nav [Boolean]
+      # @param in_edit_state [Boolean]
       def playground(
         variant: :medium,
         title: "Hello",
         description: "Last updated 5 minutes ago by XYZ.",
         with_leading_action: :"none",
         with_actions: true,
-        with_tab_nav: false
+        with_tab_nav: false,
+        in_edit_state: false
       )
         breadcrumb_items = [{ href: "/foo", text: "Foo" }, { href: "/bar", text: "Bar" }, "Baz"]
 
@@ -40,7 +42,8 @@ module Primer
                                        with_leading_action: with_leading_action,
                                        with_actions: with_actions,
                                        breadcrumb_items: breadcrumb_items,
-                                       with_tab_nav: with_tab_nav })
+                                       with_tab_nav: with_tab_nav,
+                                       in_edit_state: in_edit_state })
       end
 
       # @label Large title
@@ -54,6 +57,18 @@ module Primer
         end
       end
 
+      # @label Editable title
+      def editable_title
+        breadcrumb_items = [{ href: "/foo", text: "Foo" }, { href: "/bar", text: "Bar" }, "Baz"]
+        render(Primer::OpenProject::PageHeader.new(state: :edit)) do |header|
+          header.with_title do |title|
+            title.with_editable_form(model: nil, update_path: "/foo", cancel_path: "/bar")
+            "Hello"
+          end
+          header.with_breadcrumbs(breadcrumb_items)
+        end
+      end
+
       # @label With actions
       def actions
         render_with_template(locals: {})

data/static/arguments.json

@@ -2986,6 +2986,12 @@
         "default": "`:start`",
         "description": "Which side of the toggle switch to render the status label. One of `:end` or `:start`."
       },
+      {
+        "name": "turbo",
+        "type": "Boolean",
+        "default": "`false`",
+        "description": "Whether or not to request a turbo stream and render the response as such."
+      },
       {
         "name": "system_arguments",
         "type": "Hash",
@@ -5193,6 +5199,22 @@
       }
     ]
   },
+  {
+    "component": "OpenProject::PageHeader::Title",
+    "status": "open_project",
+    "a11y_reviewed": false,
+    "short_name": "OpenProjectPageHeaderTitle",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/page_header/title.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/page_header/title/default/",
+    "parameters": [
+      {
+        "name": "system_arguments",
+        "type": "Hash",
+        "default": "N/A",
+        "description": "[System arguments](/system-arguments)"
+      }
+    ]
+  },
   {
     "component": "OpenProject::SidePanel",
     "status": "open_project",

data/static/audited_at.json

@@ -125,6 +125,7 @@
   "Primer::OpenProject::PageHeader": "",
   "Primer::OpenProject::PageHeader::Dialog": "",
   "Primer::OpenProject::PageHeader::Menu": "",
+  "Primer::OpenProject::PageHeader::Title": "",
   "Primer::OpenProject::SidePanel": "",
   "Primer::OpenProject::SidePanel::Section": "",
   "Primer::OpenProject::SubHeader": "",

data/static/constants.json

@@ -1479,25 +1479,34 @@
       "medium",
       "large"
     ],
-    "HEADING_TAG_FALLBACK": "h1",
-    "HEADING_TAG_OPTIONS": [
-      "h1",
-      "h2",
-      "h3",
-      "h4",
-      "h5",
-      "h6"
-    ],
     "MOBILE_ACTIONS_DISPLAY": [
       "flex",
       "none"
     ],
-    "Menu": "Primer::OpenProject::PageHeader::Menu"
+    "Menu": "Primer::OpenProject::PageHeader::Menu",
+    "STATE_DEFAULT": "show",
+    "STATE_EDIT": "edit",
+    "STATE_OPTIONS": [
+      "show",
+      "edit"
+    ],
+    "Title": "Primer::OpenProject::PageHeader::Title"
   },
   "Primer::OpenProject::PageHeader::Dialog": {
   },
   "Primer::OpenProject::PageHeader::Menu": {
   },
+  "Primer::OpenProject::PageHeader::Title": {
+    "HEADING_TAG_FALLBACK": "h1",
+    "HEADING_TAG_OPTIONS": [
+      "h1",
+      "h2",
+      "h3",
+      "h4",
+      "h5",
+      "h6"
+    ]
+  },
   "Primer::OpenProject::SidePanel": {
     "Section": "Primer::OpenProject::SidePanel::Section"
   },

data/static/info_arch.json

@@ -9334,6 +9334,12 @@
         "default": "`:start`",
         "description": "Which side of the toggle switch to render the status label. One of `:end` or `:start`."
       },
+      {
+        "name": "turbo",
+        "type": "Boolean",
+        "default": "`false`",
+        "description": "Whether or not to request a turbo stream and render the response as such."
+      },
       {
         "name": "system_arguments",
         "type": "Hash",
@@ -9501,6 +9507,20 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/alpha/toggle_switch/with_turbo",
+        "name": "with_turbo",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region",
+            "button-name"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ],
     "subcomponents": [
@@ -17776,6 +17796,19 @@
           ]
         }
       },
+      {
+        "preview_path": "primer/open_project/page_header/editable_title",
+        "name": "editable_title",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
       {
         "preview_path": "primer/open_project/page_header/actions",
         "name": "actions",
@@ -18004,6 +18037,46 @@
 
     ]
   },
+  {
+    "fully_qualified_name": "Primer::OpenProject::PageHeader::Title",
+    "description": "A Helper class to create a Title inside the PageHeader title slot\nIt should not be used standalone",
+    "accessibility_docs": null,
+    "is_form_component": false,
+    "is_published": true,
+    "requires_js": false,
+    "component": "OpenProject::PageHeader::Title",
+    "status": "open_project",
+    "a11y_reviewed": false,
+    "short_name": "OpenProjectPageHeaderTitle",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/page_header/title.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/page_header/title/default/",
+    "parameters": [
+      {
+        "name": "system_arguments",
+        "type": "Hash",
+        "default": "N/A",
+        "description": "{{link_to_system_arguments_docs}}"
+      }
+    ],
+    "slots": [
+      {
+        "name": "editable_form",
+        "description": null,
+        "parameters": [
+
+        ]
+      }
+    ],
+    "methods": [
+
+    ],
+    "previews": [
+
+    ],
+    "subcomponents": [
+
+    ]
+  },
   {
     "fully_qualified_name": "Primer::OpenProject::SidePanel",
     "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

@@ -5391,6 +5391,19 @@
           ]
         }
       },
+      {
+        "preview_path": "primer/open_project/page_header/editable_title",
+        "name": "editable_title",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
       {
         "preview_path": "primer/open_project/page_header/actions",
         "name": "actions",
@@ -7823,6 +7836,20 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/alpha/toggle_switch/with_turbo",
+        "name": "with_turbo",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region",
+            "button-name"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ]
   },

data/static/statuses.json

@@ -125,6 +125,7 @@
   "Primer::OpenProject::PageHeader": "open_project",
   "Primer::OpenProject::PageHeader::Dialog": "open_project",
   "Primer::OpenProject::PageHeader::Menu": "open_project",
+  "Primer::OpenProject::PageHeader::Title": "open_project",
   "Primer::OpenProject::SidePanel": "open_project",
   "Primer::OpenProject::SidePanel::Section": "open_project",
   "Primer::OpenProject::SubHeader": "open_project",

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: openproject-primer_view_components
 version: !ruby/object:Gem::Version
-  version: 0.39.1
+  version: 0.41.0
 platform: ruby
 authors:
 - GitHub Open Source
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2024-07-26 00:00:00.000000000 Z
+date: 2024-08-06 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionview
@@ -508,6 +508,8 @@ files:
 - app/components/primer/open_project/page_header.rb
 - app/components/primer/open_project/page_header/dialog.rb
 - app/components/primer/open_project/page_header/menu.rb
+- app/components/primer/open_project/page_header/title.html.erb
+- app/components/primer/open_project/page_header/title.rb
 - 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