openproject-primer_view_components 0.40.0 → 0.41.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ff9f0c72e9e37305fe52894e785773c8608e6c6716483145ebbb12874d1c7e57
-  data.tar.gz: b8b5b507657c7824aa5eb714d51194f8c2273275c100f8000f06fa18e8f019da
+  metadata.gz: 14593fb2905980052a721c86d1b8b52a0f111166b477860d3edf7bf28310aa48
+  data.tar.gz: '0838140880dbe21f751bb20d65694d038e13f8af131196cb5bda047e49661b94'
 SHA512:
-  metadata.gz: 943eb81e21e077dab36f19896866d95b91f612b022339aa54844341238616c4845002851cce92c0aad68f88209b4d7ab53563378ea7eeb82fe82003b5b28a9aa
-  data.tar.gz: 800f37b7ad626d74ad1cc4aea0376170afb9f8d6e8629e6f9193ed3a1de05a8c19efcf46618b516114f6b95b56435eb0a45c79acca6a7e8f85b6d66e280d036a
+  metadata.gz: e8d58bdd1701157d8a20e140b681a7e23f381a23c98bf03024ba53cb40689fbe76af9d6b08cef6c721710c5c819aa9c397c667d570598d4c0fd546d87b13f582
+  data.tar.gz: e87fac40947b33003faf5a91d9945ffa1527afe6f93b0c48fa0441b3af6b3a4aac09d2c6ec362599d70e4d3133b264e391d44746dfbfda32cebe3b2b1a977e26

data/CHANGELOG.md

@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## 0.41.0
+
+### Minor Changes
+
+- [#149](https://github.com/opf/primer_view_components/pull/149) [`63cd602`](https://github.com/opf/primer_view_components/commit/63cd6022bc2dda79b602ebefcffe6f1e0ed1436f) Thanks [@HDinger](https://github.com/HDinger)! - Add support for an editable state of Primer::OpenProject::PageHeader
+
 ## 0.40.0
 
 ### Minor Changes

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

@@ -0,0 +1,7 @@
+<%= render Primer::BaseComponent.new(**@system_arguments) do %>
+  <% if show_state? %>
+      <%= content %>
+  <% elsif editable_form.present? %>
+     <%= editable_form %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,69 @@
+# frozen_string_literal: true
+
+module Primer
+  module OpenProject
+    class PageHeader
+      # A Helper class to create a Title inside the PageHeader title slot
+      # It should not be used standalone
+      class Title < Primer::Component
+        status :open_project
+
+        HEADING_TAG_OPTIONS = [:h1, :h2, :h3, :h4, :h5, :h6].freeze
+        HEADING_TAG_FALLBACK = :h1
+
+        renders_one :editable_form, lambda { |model: nil, update_path:, cancel_path:, input_name: :title, method: :put, label: I18n.t(:label_title), placeholder: I18n.t(:label_title), **system_arguments|
+          primer_form_with(
+            model: model,
+            method: method,
+            url: update_path,
+            **system_arguments
+          ) do |f|
+            render_inline_form(f) do |query_form|
+              query_form.group(layout: :horizontal) do |group|
+                group.text_field(
+                  name: input_name,
+                  placeholder: placeholder,
+                  label: label,
+                  visually_hide_label: true,
+                  required: true,
+                  autofocus: true
+                )
+
+                group.submit(name: :submit, label: I18n.t("button_save"), scheme: :primary)
+
+                group.button(
+                  name: :cancel,
+                  scheme: :secondary,
+                  label: I18n.t(:button_cancel),
+                  tag: :a,
+                  data: { "turbo-stream": true },
+                  href: cancel_path
+                )
+              end
+            end
+          end
+        }
+
+        # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+        def initialize(tag: HEADING_TAG_FALLBACK, state: Primer::OpenProject::PageHeader::STATE_DEFAULT, **system_arguments)
+          @system_arguments = system_arguments
+          @system_arguments[:tag] = fetch_or_fallback(HEADING_TAG_OPTIONS, tag, HEADING_TAG_FALLBACK)
+
+          @state = state
+        end
+
+        def render?
+          raise ArgumentError, "Please define form paramaters for the editable title" if !show_state? && !editable_form?
+
+          content? && (show_state? || editable_form?)
+        end
+
+        private
+
+        def show_state?
+          @state == Primer::OpenProject::PageHeader::STATE_DEFAULT
+        end
+      end
+    end
+  end
+end

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,7 +5,7 @@ module Primer
   module ViewComponents
     module VERSION
       MAJOR = 0
-      MINOR = 40
+      MINOR = 41
       PATCH = 0
 
       STRING = [MAJOR, MINOR, PATCH].join(".")

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

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

@@ -17796,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",
@@ -18024,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",

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.40.0
+  version: 0.41.0
 platform: ruby
 authors:
 - GitHub Open Source
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2024-07-29 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