openproject-primer_view_components 0.40.0 → 0.41.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ff9f0c72e9e37305fe52894e785773c8608e6c6716483145ebbb12874d1c7e57
-  data.tar.gz: b8b5b507657c7824aa5eb714d51194f8c2273275c100f8000f06fa18e8f019da
+  metadata.gz: a378c7a5a9aa4f33d427d21fddb301b0dbe46e538447ee4376907a43a0c8a235
+  data.tar.gz: 13380df59b216e1a5cb953ef4c68e4101e03d1b99f3f2b81c0f0d727e90db3b2
 SHA512:
-  metadata.gz: 943eb81e21e077dab36f19896866d95b91f612b022339aa54844341238616c4845002851cce92c0aad68f88209b4d7ab53563378ea7eeb82fe82003b5b28a9aa
-  data.tar.gz: 800f37b7ad626d74ad1cc4aea0376170afb9f8d6e8629e6f9193ed3a1de05a8c19efcf46618b516114f6b95b56435eb0a45c79acca6a7e8f85b6d66e280d036a
+  metadata.gz: 420aa7dd1d778a2769be9ca66c2741b736154d55b1d8ebdddc3d1dac2f58e3285d78ad8593397de3d405a3adf714390c48392732176ee5165585db1ab1bfc73f
+  data.tar.gz: 176fb4d46710b64a9fcef77cb53cb7d3934267298b9a2219c38a84f9d16d11717a43b9efb96344a0f2db3225811faf3853edda2a427d7e34648e5b280507d330

data/CHANGELOG.md

@@ -1,5 +1,17 @@
 # CHANGELOG
 
+## 0.41.1
+
+### Patch Changes
+
+- [#159](https://github.com/opf/primer_view_components/pull/159) [`f2517d6`](https://github.com/opf/primer_view_components/commit/f2517d65708cff07bef5714e1af28c15fc49915e) Thanks [@oliverguenther](https://github.com/oliverguenther)! - Allow input_width on text_area
+
+## 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/forms/text_area.rb

@@ -10,8 +10,14 @@ module Primer
         @input = input
         @input.add_input_classes("FormControl-input", "FormControl-textarea")
 
+        wrap_classes = [
+          "FormControl-input-wrap",
+        ]
+
+        wrap_classes << Primer::Forms::Dsl::Input::INPUT_WIDTH_MAPPINGS[@input.input_width] if @input.input_width
+
         @field_wrap_arguments = {
-          class: class_names("FormControl-input-wrap"),
+          class: class_names(wrap_classes),
           hidden: @input.hidden?
         }
       end

data/lib/primer/view_components/version.rb

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

data/previews/primer/alpha/text_area_preview.rb

@@ -16,6 +16,7 @@ module Primer
       # @param disabled toggle
       # @param invalid toggle
       # @param validation_message text
+      # @param input_width [Symbol] select [auto, small, medium, large, xlarge, xxlarge]
       def playground(
         name: "my-text-area",
         id: "my-text-area",
@@ -26,7 +27,8 @@ module Primer
         full_width: true,
         disabled: false,
         invalid: false,
-        validation_message: nil
+        validation_message: nil,
+        input_width: nil
       )
         system_arguments = {
           name: name,
@@ -38,7 +40,8 @@ module Primer
           full_width: full_width,
           disabled: disabled,
           invalid: invalid,
-          validation_message: validation_message
+          validation_message: validation_message,
+          input_width: input_width
         }
 
         render(Primer::Alpha::TextArea.new(**system_arguments))

data/previews/primer/forms_preview/custom_width_fields_form.html.erb

@@ -1,5 +1,37 @@
-<!-- Look at the "Assets" tab for the definition of the `CustomWidthFieldsForm` -->
+<%
+  custom_width_form = Class.new(ApplicationForm) do
+    form do |f|
+      f.text_field(
+        name: :ultimate_answer,
+        label: "Ultimate answer",
+        required: true,
+        caption: "The answer to life, the universe, and everything",
+        input_width: :medium
+      )
+
+      f.select_list(
+        name: "cities",
+        label: "Cool cities",
+        caption: "Select your favorite!",
+        include_blank: true,
+        input_width: :small
+      ) do |city_list|
+        city_list.option(label: "Lopez Island", value: "lopez_island")
+        city_list.option(label: "Bellevue", value: "bellevue")
+        city_list.option(label: "Seattle", value: "seattle")
+      end
+
+      f.text_field(
+        name: :lots_of_text,
+        label: "Lots of text",
+        required: true,
+        caption: "What else do you need?",
+        input_width: :small
+      )
+    end
+  end
+%>
 
 <%= primer_form_with(url: "/foo") do |f| %>
-  <%= render(CustomWidthFieldsForm.new(f)) %>
+  <%= render(custom_width_form.new(f)) %>
 <% 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

@@ -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.1
 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-07 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
@@ -566,7 +568,6 @@ files:
 - app/forms/check_box_group_form.rb
 - app/forms/check_box_with_nested_form.rb
 - app/forms/composed_form.rb
-- app/forms/custom_width_fields_form.rb
 - app/forms/example_toggle_switch_form.rb
 - app/forms/example_toggle_switch_form/example_field_caption.html.erb
 - app/forms/first_name_form.rb

data/app/forms/custom_width_fields_form.rb

@@ -1,26 +0,0 @@
-# frozen_string_literal: true
-
-# :nodoc:
-class CustomWidthFieldsForm < ApplicationForm
-  form do |f|
-    f.text_field(
-      name: :ultimate_answer,
-      label: "Ultimate answer",
-      required: true,
-      caption: "The answer to life, the universe, and everything",
-      input_width: :medium
-    )
-
-    f.select_list(
-      name: "cities",
-      label: "Cool cities",
-      caption: "Select your favorite!",
-      include_blank: true,
-      input_width: :small
-    ) do |city_list|
-      city_list.option(label: "Lopez Island", value: "lopez_island")
-      city_list.option(label: "Bellevue", value: "bellevue")
-      city_list.option(label: "Seattle", value: "seattle")
-    end
-  end
-end