Allow confirmation checkbox label customisation

Adds `confirmation_checkbox` slot to allow the caller to provide custom
labels, including I18n strings.

app/components/primer/open_project/danger_confirmation_dialog.html.erb

@@ -7,16 +7,7 @@
           <% if additional_details? %>
             <%= additional_details %>
           <% end %>
-          <%= render(Primer::BaseComponent.new(tag: :div, display: :flex, justify_content: :center)) do %>
-            <%= render(Primer::Alpha::CheckBox.new(
-                name: "confirm_dangerous_action",
-                label: "I understand that this deletion cannot be reversed",
-                id: "#{dialog_id}-checkbox",
-                data: {
-                  target: "danger-confirmation-dialog-form-helper.checkbox",
-                  action: "change:danger-confirmation-dialog-form-helper#toggle"
-                })) %>
-          <% end %>
+          <%= confirmation_checkbox %>
         <% end %>
       </scrollable-region>
       <%= render(Primer::Alpha::Dialog::Footer.new(show_divider: false)) do %>

app/components/primer/open_project/danger_confirmation_dialog.rb

@@ -25,6 +25,19 @@ class DangerConfirmationDialog < Primer::Component
         FeedbackMessage.new(icon_arguments: icon_arguments, **system_arguments)
       }
 
+      # A checkbox that the user is required to check in order to continue with the destructive action.
+      #
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :confirmation_checkbox, lambda { |**system_arguments|
+        system_arguments[:display] ||= :flex
+        system_arguments[:align_items] ||= :center
+        system_arguments[:justify_content] ||= :center
+
+        checkbox_id = "#{dialog_id}-checkbox"
+
+        Primer::OpenProject::DangerConfirmationDialog::ConfirmationCheckbox.new(checkbox_id: checkbox_id, **system_arguments)
+      }
+
       # Optional additional_details such as grid displaying a list of items to be deleted
       #
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>

app/components/primer/open_project/danger_confirmation_dialog/confirmation_checkbox.rb

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+module Primer
+  module OpenProject
+    class DangerConfirmationDialog
+      # This component is part of `Primer::OpenProject::DangerConfirmationDialog`
+      # and should not be used as a standalone component.
+      class ConfirmationCheckbox < Primer::Component
+
+        # @param checkbox_id [String] The id of the checkbox input.
+        # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+        def initialize(checkbox_id: self.class.generate_id, **system_arguments)
+          @system_arguments = deny_tag_argument(**system_arguments)
+          @system_arguments[:tag] = :div
+          @system_arguments[:classes] = class_names(
+            system_arguments[:classes],
+            "DangerConfirmationDialog-confirmationCheckbox"
+          )
+
+          @checkbox_arguments = {}
+          @checkbox_arguments[:id] = checkbox_id
+          @checkbox_arguments[:name] = "confirm_dangerous_action"
+          @checkbox_arguments[:data] = {
+            target: "danger-confirmation-dialog-form-helper.checkbox",
+            action: "change:danger-confirmation-dialog-form-helper#toggle"
+          }
+        end
+
+        def call
+          render(Primer::BaseComponent.new(**@system_arguments)) do
+            render(Primer::Alpha::CheckBox.new(**@checkbox_arguments.merge(label: trimmed_content)))
+          end
+        end
+
+        private
+
+        def before_render
+          content
+        end
+      end
+    end
+  end
+end

previews/primer/open_project/danger_confirmation_dialog_preview.rb

@@ -16,6 +16,7 @@ def default
             message.with_heading(tag: :h2) { "Permanently delete?" }
             message.with_description_content("This action is not reversible. Please proceed with caution.")
           end
+          dialog.with_confirmation_checkbox_content("I understand that this deletion cannot be reversed")
         end
       end
 
@@ -24,11 +25,19 @@ def default
       # @param icon_color [Symbol] select [default, muted, subtle, accent, success, attention, severe, danger, open, closed, done, sponsors, on_emphasis, inherit]
       # @param show_description toggle
       # @param show_additional_details toggle
-      def playground(icon: :"alert", icon_color: :danger, show_description: true, show_additional_details: false)
+      # @param checkbox_text [String]
+      def playground(
+        icon: :"alert",
+        icon_color: :danger,
+        show_description: true,
+        show_additional_details: false,
+        checkbox_text: "I understand that this deletion cannot be reversed"
+      )
         render_with_template(locals: { icon: icon,
                                        icon_color: icon_color,
                                        show_description: show_description,
-                                       show_additional_details: show_additional_details })
+                                       show_additional_details: show_additional_details,
+                                       checkbox_text: checkbox_text })
       end
 
       # @label With form
@@ -43,6 +52,7 @@ def with_form
             message.with_heading(tag: :h2).with_content("Permanently delete?")
             message.with_description_content("This action is not reversible. Please proceed with caution.")
           end
+          dialog.with_confirmation_checkbox_content("I understand that this deletion cannot be reversed")
         end
       end
 
@@ -59,6 +69,7 @@ def custom_icon
             message.with_heading(tag: :h2) { "Permanently delete?" }
             message.with_description_content("This action is not reversible and will remove all containing sub-tiems. Please proceed with caution.")
           end
+          dialog.with_confirmation_checkbox_content("I understand that this deletion cannot be reversed")
         end
       end
     end

previews/primer/open_project/danger_confirmation_dialog_preview/playground.html.erb

@@ -9,4 +9,5 @@
       <%= render(Primer::Alpha::Banner.new) { "Some additional content below" } %>
     <% end %>
   <% end %>
+  <% dialog.with_confirmation_checkbox_content(checkbox_text) %>
 <% end %>

previews/primer/open_project/danger_confirmation_dialog_preview/with_additional_details.html.erb

@@ -36,4 +36,5 @@
       <% end %>
     <% end %>
   <% end %>
+  <% dialog.with_confirmation_checkbox_content("I understand that this deletion cannot be reversed") %>
 <% end %>

test/components/primer/open_project/danger_confirmation_dialog_test.rb

@@ -10,12 +10,13 @@ def test_renders
       dialog.with_confirmation_message do |message|
         message.with_heading(tag: :h2) { "Danger" }
       end
+      dialog.with_confirmation_checkbox { "I confirm this deletion" }
     end
 
     assert_selector("dialog.DangerConfirmationDialog") do
       assert_selector(".Overlay-body h2", text: "Danger")
       assert_selector(".octicon-alert.blankslate-icon")
-      assert_selector(".FormControl-checkbox + * > .FormControl-label", text: "I understand that this deletion cannot be reversed")
+      assert_selector(".FormControl-checkbox + * > .FormControl-label", text: "I confirm this deletion")
       assert_selector(".Overlay-footer .Button", count: 2)
     end
   end
@@ -25,6 +26,7 @@ def test_renders_without_form_by_default
       dialog.with_confirmation_message do |message|
         message.with_heading(tag: :h2) { "Danger" }
       end
+      dialog.with_confirmation_checkbox { "I confirm this deletion" }
     end
 
     assert_selector("dialog.DangerConfirmationDialog") do
@@ -39,6 +41,7 @@ def test_renders_form_with_form_arguments
       dialog.with_confirmation_message do |message|
         message.with_heading(tag: :h2) { "Danger" }
       end
+      dialog.with_confirmation_checkbox { "I confirm this deletion" }
     end
 
     assert_selector("dialog.DangerConfirmationDialog") do
@@ -51,11 +54,12 @@ def test_renders_provided_id
       dialog.with_confirmation_message do |message|
         message.with_heading(tag: :h2) { "Danger" }
       end
+      dialog.with_confirmation_checkbox { "I confirm this deletion" }
     end
 
     assert_selector("dialog#danger-dialog.DangerConfirmationDialog") do
       assert_selector("input#danger-dialog-checkbox")
-      assert_selector("label[for='danger-dialog-checkbox']", text: "I understand that this deletion cannot be reversed")
+      assert_selector("label[for='danger-dialog-checkbox']", text: "I confirm this deletion")
     end
   end
 
@@ -65,6 +69,7 @@ def test_renders_additional_details
         message.with_heading(tag: :h2) { "Danger" }
       end
       dialog.with_additional_details { "Additional important information." }
+      dialog.with_confirmation_checkbox { "I confirm this deletion" }
     end
 
     assert_selector("dialog.DangerConfirmationDialog") do