openproject-primer_view_components 0.52.4 → 0.53.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (42) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +30 -0
  3. data/app/assets/javascripts/components/primer/open_project/danger_dialog_form_helper.d.ts +13 -0
  4. data/app/assets/javascripts/components/primer/primer.d.ts +1 -1
  5. data/app/assets/javascripts/primer_view_components.js +1 -1
  6. data/app/assets/javascripts/primer_view_components.js.map +1 -1
  7. data/app/components/primer/open_project/{danger_confirmation_dialog → danger_dialog}/confirmation_check_box.rb +5 -5
  8. data/app/components/primer/open_project/{danger_confirmation_dialog → danger_dialog}/form_wrapper.rb +2 -2
  9. data/app/components/primer/open_project/{danger_confirmation_dialog.html.erb → danger_dialog.html.erb} +2 -2
  10. data/app/components/primer/open_project/{danger_confirmation_dialog.rb → danger_dialog.rb} +16 -12
  11. data/app/components/primer/open_project/danger_dialog_form_helper.d.ts +13 -0
  12. data/app/components/primer/open_project/{danger_confirmation_dialog_form_helper.js → danger_dialog_form_helper.js} +19 -14
  13. data/app/components/primer/open_project/danger_dialog_form_helper.ts +41 -0
  14. data/app/components/primer/open_project/feedback_dialog.rb +3 -2
  15. data/app/components/primer/primer.d.ts +1 -1
  16. data/app/components/primer/primer.js +1 -1
  17. data/app/components/primer/primer.ts +1 -1
  18. data/lib/primer/view_components/version.rb +2 -2
  19. data/previews/primer/open_project/danger_dialog_preview/deletion_form.rb +23 -0
  20. data/previews/primer/open_project/{danger_confirmation_dialog_preview → danger_dialog_preview}/playground.html.erb +4 -3
  21. data/previews/primer/open_project/{danger_confirmation_dialog_preview → danger_dialog_preview}/with_additional_details.html.erb +1 -1
  22. data/previews/primer/open_project/{danger_confirmation_dialog_preview → danger_dialog_preview}/with_form.html.erb +2 -2
  23. data/previews/primer/open_project/danger_dialog_preview/with_form_builder_form.html.erb +18 -0
  24. data/previews/primer/open_project/danger_dialog_preview/with_form_builder_form_test.html.erb +17 -0
  25. data/previews/primer/open_project/{danger_confirmation_dialog_preview → danger_dialog_preview}/with_form_test.html.erb +2 -2
  26. data/previews/primer/open_project/{danger_confirmation_dialog_preview.rb → danger_dialog_preview.rb} +18 -6
  27. data/previews/primer/open_project/feedback_dialog_preview/playground.html.erb +1 -1
  28. data/previews/primer/open_project/feedback_dialog_preview/with_additional_details.html.erb +1 -1
  29. data/previews/primer/open_project/feedback_dialog_preview/with_custom_footer.html.erb +1 -1
  30. data/static/arguments.json +36 -12
  31. data/static/audited_at.json +3 -3
  32. data/static/constants.json +8 -8
  33. data/static/info_arch.json +63 -26
  34. data/static/previews.json +24 -11
  35. data/static/statuses.json +3 -3
  36. metadata +19 -18
  37. data/app/assets/javascripts/components/primer/open_project/danger_confirmation_dialog_form_helper.d.ts +0 -13
  38. data/app/components/primer/open_project/danger_confirmation_dialog_form_helper.d.ts +0 -13
  39. data/app/components/primer/open_project/danger_confirmation_dialog_form_helper.ts +0 -36
  40. data/previews/primer/open_project/danger_confirmation_dialog_preview/with_form_builder_form.html.erb +0 -14
  41. data/previews/primer/open_project/danger_confirmation_dialog_preview/with_form_builder_form_test.html.erb +0 -13
  42. /data/app/components/primer/open_project/{danger_confirmation_dialog → danger_dialog}/form_wrapper.html.erb +0 -0
@@ -2,8 +2,8 @@
2
2
 
3
3
  module Primer
4
4
  module OpenProject
5
- class DangerConfirmationDialog
6
- # This component is part of `Primer::OpenProject::DangerConfirmationDialog`
5
+ class DangerDialog
6
+ # This component is part of `Primer::OpenProject::DangerDialog`
7
7
  # and should not be used as a standalone component.
8
8
  class ConfirmationCheckBox < Primer::Component
9
9
  status :open_project
@@ -16,15 +16,15 @@ module Primer
16
16
  @system_arguments[:tag] = :div
17
17
  @system_arguments[:classes] = class_names(
18
18
  system_arguments[:classes],
19
- "DangerConfirmationDialog-confirmationCheckBox"
19
+ "DangerDialog-confirmationCheckBox"
20
20
  )
21
21
 
22
22
  @check_box_arguments = {}
23
23
  @check_box_arguments[:id] = check_box_id
24
24
  @check_box_arguments[:name] = check_box_name
25
25
  @check_box_arguments[:data] = {
26
- target: "danger-confirmation-dialog-form-helper.checkbox",
27
- action: "change:danger-confirmation-dialog-form-helper#toggle"
26
+ target: "danger-dialog-form-helper.checkbox",
27
+ action: "change:danger-dialog-form-helper#toggle"
28
28
  }
29
29
  end
30
30
 
@@ -2,8 +2,8 @@
2
2
 
3
3
  module Primer
4
4
  module OpenProject
5
- class DangerConfirmationDialog
6
- # Utility component for wrapping DangerConfirmationDialog in a form
5
+ class DangerDialog
6
+ # Utility component for wrapping DangerDialog in a form
7
7
  class FormWrapper < Primer::Component
8
8
  status :open_project
9
9
 
@@ -1,5 +1,5 @@
1
1
  <%= render @dialog do |dialog| %>
2
- <danger-confirmation-dialog-form-helper>
2
+ <danger-dialog-form-helper>
3
3
  <%= render(@form_wrapper) do %>
4
4
  <scrollable-region data-labelled-by="<%= labelledby %>">
5
5
  <%= render(Primer::Alpha::Dialog::Body.new) do %>
@@ -15,5 +15,5 @@
15
15
  <%= render(Primer::Beta::Button.new(type: (@form_wrapper.shows_form? ? :submit : :button), scheme: :danger, data: { "submit-dialog-id": dialog_id })) { @confirm_button_text } %>
16
16
  <% end %>
17
17
  <% end %>
18
- </danger-confirmation-dialog-form-helper>
18
+ </danger-dialog-form-helper>
19
19
  <% end %>
@@ -3,7 +3,7 @@
3
3
  module Primer
4
4
  module OpenProject
5
5
  # A pre-configured dialog for destructive/"potentially dangerous" actions
6
- class DangerConfirmationDialog < Primer::Component
6
+ class DangerDialog < Primer::Component
7
7
  status :open_project
8
8
 
9
9
  # The dialog's ID value.
@@ -27,7 +27,7 @@ module Primer
27
27
  FeedbackMessage.new(icon_arguments: icon_arguments, **system_arguments)
28
28
  }
29
29
 
30
- # A checkbox that the user is required to check in order to continue with the destructive action.
30
+ # An optional checkbox that the user is required to check in order to continue with the destructive action.
31
31
  #
32
32
  # To render the checkbox label (required), pass a block that returns a String.
33
33
  #
@@ -39,7 +39,7 @@ module Primer
39
39
 
40
40
  check_box_id = "#{dialog_id}-check_box"
41
41
 
42
- Primer::OpenProject::DangerConfirmationDialog::ConfirmationCheckBox.new(check_box_id: check_box_id, check_box_name: @check_box_name, **system_arguments)
42
+ Primer::OpenProject::DangerDialog::ConfirmationCheckBox.new(check_box_id: check_box_id, check_box_name: @check_box_name, **system_arguments)
43
43
  }
44
44
 
45
45
  # Optional additional details, such as grid displaying a list of items to be deleted
@@ -50,7 +50,7 @@ module Primer
50
50
  system_arguments[:tag] = :div
51
51
  system_arguments[:classes] = class_names(
52
52
  system_arguments[:classes],
53
- "DangerConfirmationDialog-additionalDetails"
53
+ "DangerDialog-additionalDetails"
54
54
  )
55
55
 
56
56
  system_arguments[:display] ||= :flex
@@ -63,12 +63,16 @@ module Primer
63
63
 
64
64
  # @param form_arguments [Hash] Allows the dialog to submit a form. Pass EITHER the `builder:` option to this hash to reuse an existing Rails form, or `action:` if you prefer the component to render the form tag itself. `builder:` should be an instance of `ActionView::Helpers::FormBuilder`, which is created by the standard Rails `#form_with` and `#form_for` helpers. The `name:` option is the desired name of the field that will be included in the params sent to the server on form submission.
65
65
  # @param id [String] The id of the dialog.
66
+ # @param title [String] The title of the dialog. Although visually hidden, a label is rendered for assistive technologies.
67
+ # @param confirm_button_text [String] The text of the confirm button. Will default to `I18n.t("button_delete")`, or `I18n.t("button_delete_permanently")` if `confirmation_check_box` slot has been passed to the component.
68
+ # @param cancel_button_text [String] The text of the cancel button. Will default to `I18n.t("button_cancel")`.
66
69
  # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
67
70
  def initialize(
68
71
  form_arguments: {},
69
72
  id: self.class.generate_id,
70
- confirm_button_text: I18n.t("button_delete_permanently"),
71
- cancel_button_text: I18n.t("button_cancel"),
73
+ title:,
74
+ confirm_button_text: nil,
75
+ cancel_button_text: nil,
72
76
  **system_arguments
73
77
  )
74
78
  @check_box_name = form_arguments.delete(:name) || "confirm_dangerous_action"
@@ -82,10 +86,10 @@ module Primer
82
86
  @system_arguments[:id] = @dialog_id
83
87
  @system_arguments[:classes] = class_names(
84
88
  system_arguments[:classes],
85
- "DangerConfirmationDialog"
89
+ "DangerDialog"
86
90
  )
87
91
 
88
- @dialog = Primer::Alpha::Dialog.new(title: @system_arguments[:title], subtitle: nil, visually_hide_title: true, **@system_arguments)
92
+ @dialog = Primer::Alpha::Dialog.new(title: title, subtitle: nil, visually_hide_title: true, **@system_arguments)
89
93
  end
90
94
 
91
95
  delegate :labelledby, :header?, :header, :with_header, :with_header_content,
@@ -93,16 +97,16 @@ module Primer
93
97
  to: :@dialog
94
98
 
95
99
  def render?
96
- raise ArgumentError, "DangerConfirmationDialog requires a confirmation_message" unless confirmation_message?
97
- raise ArgumentError, "DangerConfirmationDialog requires a confirmation_check_box" unless confirmation_check_box?
100
+ raise ArgumentError, "DangerDialog requires a confirmation_message" unless confirmation_message?
98
101
 
99
- confirmation_message? && confirmation_check_box?
102
+ confirmation_message?
100
103
  end
101
104
 
102
105
  private
103
106
 
104
107
  def before_render
105
- content
108
+ @confirm_button_text ||= confirmation_check_box? ? I18n.t("button_delete_permanently") : I18n.t("button_delete")
109
+ @cancel_button_text ||= I18n.t("button_cancel")
106
110
  end
107
111
  end
108
112
  end
@@ -0,0 +1,13 @@
1
+ declare class DangerDialogFormHelperElement extends HTMLElement {
2
+ #private;
3
+ checkbox: HTMLInputElement | undefined;
4
+ get submitButton(): HTMLInputElement | HTMLButtonElement;
5
+ connectedCallback(): void;
6
+ toggle(): void;
7
+ }
8
+ declare global {
9
+ interface Window {
10
+ DangerDialogFormHelperElement: typeof DangerDialogFormHelperElement;
11
+ }
12
+ }
13
+ export {};
@@ -9,36 +9,41 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
9
9
  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
10
10
  return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
11
11
  };
12
- var _DangerConfirmationDialogFormHelperElement_instances, _DangerConfirmationDialogFormHelperElement_reset;
12
+ var _DangerDialogFormHelperElement_instances, _DangerDialogFormHelperElement_reset;
13
13
  import { controller, target } from '@github/catalyst';
14
14
  const SUBMIT_BUTTON_SELECTOR = 'input[type=submit],button[type=submit],button[data-submit-dialog-id]';
15
- let DangerConfirmationDialogFormHelperElement = class DangerConfirmationDialogFormHelperElement extends HTMLElement {
15
+ let DangerDialogFormHelperElement = class DangerDialogFormHelperElement extends HTMLElement {
16
16
  constructor() {
17
17
  super(...arguments);
18
- _DangerConfirmationDialogFormHelperElement_instances.add(this);
18
+ _DangerDialogFormHelperElement_instances.add(this);
19
19
  }
20
20
  get submitButton() {
21
21
  return this.querySelector(SUBMIT_BUTTON_SELECTOR);
22
22
  }
23
23
  connectedCallback() {
24
- __classPrivateFieldGet(this, _DangerConfirmationDialogFormHelperElement_instances, "m", _DangerConfirmationDialogFormHelperElement_reset).call(this);
24
+ this.style.display = 'contents';
25
+ __classPrivateFieldGet(this, _DangerDialogFormHelperElement_instances, "m", _DangerDialogFormHelperElement_reset).call(this);
25
26
  }
26
27
  toggle() {
27
- this.submitButton.disabled = !this.checkbox.checked;
28
+ if (this.checkbox) {
29
+ this.submitButton.disabled = !this.checkbox.checked;
30
+ }
28
31
  }
29
32
  };
30
- _DangerConfirmationDialogFormHelperElement_instances = new WeakSet();
31
- _DangerConfirmationDialogFormHelperElement_reset = function _DangerConfirmationDialogFormHelperElement_reset() {
32
- this.checkbox.checked = false;
33
+ _DangerDialogFormHelperElement_instances = new WeakSet();
34
+ _DangerDialogFormHelperElement_reset = function _DangerDialogFormHelperElement_reset() {
35
+ if (this.checkbox) {
36
+ this.checkbox.disabled = false;
37
+ }
33
38
  this.toggle();
34
39
  };
35
40
  __decorate([
36
41
  target
37
- ], DangerConfirmationDialogFormHelperElement.prototype, "checkbox", void 0);
38
- DangerConfirmationDialogFormHelperElement = __decorate([
42
+ ], DangerDialogFormHelperElement.prototype, "checkbox", void 0);
43
+ DangerDialogFormHelperElement = __decorate([
39
44
  controller
40
- ], DangerConfirmationDialogFormHelperElement);
41
- if (!window.customElements.get('danger-confirmation-dialog-form-helper')) {
42
- window.DangerConfirmationDialogFormHelperElement = DangerConfirmationDialogFormHelperElement;
43
- window.customElements.define('danger-confirmation-dialog-form-helper', DangerConfirmationDialogFormHelperElement);
45
+ ], DangerDialogFormHelperElement);
46
+ if (!window.customElements.get('danger-dialog-form-helper')) {
47
+ window.DangerDialogFormHelperElement = DangerDialogFormHelperElement;
48
+ window.customElements.define('danger-dialog-form-helper', DangerDialogFormHelperElement);
44
49
  }
@@ -0,0 +1,41 @@
1
+ import {controller, target} from '@github/catalyst'
2
+
3
+ const SUBMIT_BUTTON_SELECTOR = 'input[type=submit],button[type=submit],button[data-submit-dialog-id]'
4
+
5
+ @controller
6
+ class DangerDialogFormHelperElement extends HTMLElement {
7
+ @target checkbox: HTMLInputElement | undefined
8
+
9
+ get submitButton() {
10
+ return this.querySelector<HTMLInputElement | HTMLButtonElement>(SUBMIT_BUTTON_SELECTOR)!
11
+ }
12
+
13
+ connectedCallback() {
14
+ this.style.display = 'contents'
15
+ this.#reset()
16
+ }
17
+
18
+ toggle(): void {
19
+ if (this.checkbox) {
20
+ this.submitButton.disabled = !this.checkbox.checked
21
+ }
22
+ }
23
+
24
+ #reset(): void {
25
+ if (this.checkbox) {
26
+ this.checkbox.disabled = false
27
+ }
28
+ this.toggle()
29
+ }
30
+ }
31
+
32
+ declare global {
33
+ interface Window {
34
+ DangerDialogFormHelperElement: typeof DangerDialogFormHelperElement
35
+ }
36
+ }
37
+
38
+ if (!window.customElements.get('danger-dialog-form-helper')) {
39
+ window.DangerDialogFormHelperElement = DangerDialogFormHelperElement
40
+ window.customElements.define('danger-dialog-form-helper', DangerDialogFormHelperElement)
41
+ }
@@ -40,8 +40,9 @@ module Primer
40
40
 
41
41
  renders_one :footer
42
42
 
43
+ # @param title [String] The title of the dialog. Although visually hidden, a label is rendered for assistive technologies.
43
44
  # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
44
- def initialize(**system_arguments)
45
+ def initialize(title:, **system_arguments)
45
46
  @system_arguments = system_arguments
46
47
  @system_arguments[:classes] = class_names(
47
48
  system_arguments[:classes],
@@ -49,7 +50,7 @@ module Primer
49
50
  )
50
51
  @system_arguments[:id] ||= self.class.generate_id
51
52
 
52
- @dialog = Primer::Alpha::Dialog.new(title: @system_arguments[:title], subtitle: nil, visually_hide_title: true, **@system_arguments)
53
+ @dialog = Primer::Alpha::Dialog.new(title: title, subtitle: nil, visually_hide_title: true, **@system_arguments)
53
54
  end
54
55
 
55
56
  delegate :header?, :header, :with_header, :with_header_content,
@@ -28,4 +28,4 @@ import './alpha/select_panel_element';
28
28
  import './open_project/page_header_element';
29
29
  import './open_project/zen_mode_button';
30
30
  import './open_project/sub_header_element';
31
- import './open_project/danger_confirmation_dialog_form_helper';
31
+ import './open_project/danger_dialog_form_helper';
@@ -28,4 +28,4 @@ import './alpha/select_panel_element';
28
28
  import './open_project/page_header_element';
29
29
  import './open_project/zen_mode_button';
30
30
  import './open_project/sub_header_element';
31
- import './open_project/danger_confirmation_dialog_form_helper';
31
+ import './open_project/danger_dialog_form_helper';
@@ -28,4 +28,4 @@ import './alpha/select_panel_element'
28
28
  import './open_project/page_header_element'
29
29
  import './open_project/zen_mode_button'
30
30
  import './open_project/sub_header_element'
31
- import './open_project/danger_confirmation_dialog_form_helper'
31
+ import './open_project/danger_dialog_form_helper'
@@ -5,8 +5,8 @@ module Primer
5
5
  module ViewComponents
6
6
  module VERSION
7
7
  MAJOR = 0
8
- MINOR = 52
9
- PATCH = 4
8
+ MINOR = 53
9
+ PATCH = 1
10
10
 
11
11
  STRING = [MAJOR, MINOR, PATCH].join(".")
12
12
  end
@@ -0,0 +1,23 @@
1
+ # frozen_string_literal: true
2
+ module Primer
3
+ module OpenProject
4
+ class DangerDialogPreview
5
+ # :nodoc:
6
+ class DeletionForm < Primer::Forms::Base
7
+ form do |deletion_form|
8
+ deletion_form.text_field(
9
+ name: :reason,
10
+ label: "Reason for deletion",
11
+ required: true,
12
+ caption: "Enter the reason for deleting this item"
13
+ )
14
+ deletion_form.check_box_group(name: "notify", label: "Notify") do |check_group|
15
+ check_group.check_box(value: "creator", label: "Creator")
16
+ check_group.check_box(value: "assignee", label: "Assignee")
17
+ check_group.check_box(value: "watchers", label: "Watchers")
18
+ end
19
+ end
20
+ end
21
+ end
22
+ end
23
+ end
@@ -1,6 +1,7 @@
1
- <%= render(Primer::OpenProject::DangerConfirmationDialog.new(id: "my-dialog",
2
- confirm_button_text: confirm_button_text,
3
- cancel_button_text: cancel_button_text)) do |dialog| %>
1
+ <%= render(Primer::OpenProject::DangerDialog.new(id: "my-dialog",
2
+ title: "My dialog",
3
+ confirm_button_text: confirm_button_text,
4
+ cancel_button_text: cancel_button_text)) do |dialog| %>
4
5
  <% dialog.with_show_button { "Click me" } %>
5
6
  <% dialog.with_confirmation_message(icon_arguments: { icon: icon, color: icon_color }) do |message| %>
6
7
  <% message.with_heading(tag: :h2).with_content("Proceed with danger?") %>
@@ -1,4 +1,4 @@
1
- <%= render(Primer::OpenProject::DangerConfirmationDialog.new) do |dialog| %>
1
+ <%= render(Primer::OpenProject::DangerDialog.new(title: "Delete work packages")) do |dialog| %>
2
2
  <% dialog.with_show_button { "Click me" } %>
3
3
  <% dialog.with_confirmation_message do |message| %>
4
4
  <% message.with_heading(tag: :h2).with_content("Delete 5 work packages?") %>
@@ -1,10 +1,10 @@
1
- <%= render(Primer::OpenProject::DangerConfirmationDialog.new(
1
+ <%= render(Primer::OpenProject::DangerDialog.new(
2
2
  title: "Delete dialog",
3
3
  form_arguments: { action: "" } # Use the correct form action here.
4
4
  )) do |dialog| %>
5
5
  <% dialog.with_show_button { "Click me" } %>
6
6
  <% dialog.with_confirmation_message do |message|
7
- message.with_heading(tag: :h2).with_content("Permanently delete?")
7
+ message.with_heading(tag: :h2).with_content("Permanently delete this item?")
8
8
  message.with_description_content("This action is not reversible. Please proceed with caution.")
9
9
  end %>
10
10
  <% dialog.with_confirmation_check_box_content("I understand that this deletion cannot be reversed") %>
@@ -0,0 +1,18 @@
1
+ <!-- Use the correct form URL here. -->
2
+ <%= primer_form_with(url: "") do |f| %>
3
+ <%= render(Primer::OpenProject::DangerDialog.new(
4
+ title: "Delete dialog",
5
+ form_arguments: { builder: f }
6
+ )) do |dialog| %>
7
+ <% dialog.with_show_button { "Click me" } %>
8
+ <% dialog.with_confirmation_message do |message|
9
+ message.with_heading(tag: :h2).with_content("Permanently delete this item?")
10
+ message.with_description_content("This action is not reversible. Please confirm the following details before deletion.")
11
+ end %>
12
+ <% dialog.with_additional_details do %>
13
+ <%= render(Primer::Box.new(flex: 1, border: true, border_radius: 2, p: 3)) do %>
14
+ <%= render(Primer::OpenProject::DangerDialogPreview::DeletionForm.new(f)) %>
15
+ <% end %>
16
+ <% end %>
17
+ <% end %>
18
+ <% end %>
@@ -0,0 +1,17 @@
1
+ <%= primer_form_with(url: generic_form_submission_path(route_format)) do |f| %>
2
+ <%= render(Primer::OpenProject::DangerDialog.new(
3
+ title: "Delete dialog",
4
+ form_arguments: { builder: f }
5
+ )) do |dialog| %>
6
+ <% dialog.with_show_button { "Click me" } %>
7
+ <% dialog.with_confirmation_message do |message|
8
+ message.with_heading(tag: :h2).with_content("Permanently delete this item?")
9
+ message.with_description_content("This action is not reversible. Please proceed with caution.")
10
+ end %>
11
+ <% dialog.with_additional_details do %>
12
+ <%= render(Primer::Box.new(flex: 1, border: true, border_radius: 2, p: 3)) do %>
13
+ <%= render(Primer::OpenProject::DangerDialogPreview::DeletionForm.new(f)) %>
14
+ <% end %>
15
+ <% end %>
16
+ <% end %>
17
+ <% end %>
@@ -1,10 +1,10 @@
1
- <%= render(Primer::OpenProject::DangerConfirmationDialog.new(
1
+ <%= render(Primer::OpenProject::DangerDialog.new(
2
2
  title: "Delete dialog",
3
3
  form_arguments: { action: generic_form_submission_path(route_format) }
4
4
  )) do |dialog| %>
5
5
  <% dialog.with_show_button { "Click me" } %>
6
6
  <% dialog.with_confirmation_message do |message|
7
- message.with_heading(tag: :h2).with_content("Permanently delete?")
7
+ message.with_heading(tag: :h2).with_content("Permanently delete this item?")
8
8
  message.with_description_content("This action is not reversible. Please proceed with caution.")
9
9
  end %>
10
10
  <% dialog.with_confirmation_check_box_content("I understand that this deletion cannot be reversed") %>
@@ -5,15 +5,27 @@
5
5
 
6
6
  module Primer
7
7
  module OpenProject
8
- # @label DangerConfirmationDialog
9
- class DangerConfirmationDialogPreview < ViewComponent::Preview
8
+ # @label DangerDialog
9
+ class DangerDialogPreview < ViewComponent::Preview
10
10
  # @label Default
11
11
  # @snapshot interactive
12
12
  def default
13
- render(Primer::OpenProject::DangerConfirmationDialog.new(title: "Delete dialog")) do |dialog|
13
+ render(Primer::OpenProject::DangerDialog.new(title: "Delete dialog")) do |dialog|
14
14
  dialog.with_show_button { "Click me" }
15
15
  dialog.with_confirmation_message do |message|
16
- message.with_heading(tag: :h2) { "Permanently delete?" }
16
+ message.with_heading(tag: :h2) { "Delete this item?" }
17
+ message.with_description_content("Do you want to continue?")
18
+ end
19
+ end
20
+ end
21
+
22
+ # @label With confirmation check box
23
+ # @snapshot interactive
24
+ def with_confirmation_check_box
25
+ render(Primer::OpenProject::DangerDialog.new(title: "Delete dialog")) do |dialog|
26
+ dialog.with_show_button { "Click me" }
27
+ dialog.with_confirmation_message do |message|
28
+ message.with_heading(tag: :h2) { "Permanently delete this item?" }
17
29
  message.with_description_content("This action is not reversible. Please proceed with caution.")
18
30
  end
19
31
  dialog.with_confirmation_check_box_content("I understand that this deletion cannot be reversed")
@@ -63,10 +75,10 @@ module Primer
63
75
 
64
76
  # @label With custom icon
65
77
  def custom_icon
66
- render(Primer::OpenProject::DangerConfirmationDialog.new(title: "Delete dialog")) do |dialog|
78
+ render(Primer::OpenProject::DangerDialog.new(title: "Delete dialog")) do |dialog|
67
79
  dialog.with_show_button { "Click me" }
68
80
  dialog.with_confirmation_message(icon_arguments: { icon: :"alert-fill" }) do |message|
69
- message.with_heading(tag: :h2) { "Permanently delete?" }
81
+ message.with_heading(tag: :h2) { "Permanently delete this item?" }
70
82
  message.with_description_content("This action is not reversible and will remove all containing sub-tiems. Please proceed with caution.")
71
83
  end
72
84
  dialog.with_confirmation_check_box_content("I understand that this deletion cannot be reversed")
@@ -1,4 +1,4 @@
1
- <%= render(Primer::OpenProject::FeedbackDialog.new(id: "my-dialog")) do |dialog| %>
1
+ <%= render(Primer::OpenProject::FeedbackDialog.new(id: "my-dialog", title: "My dialog")) do |dialog| %>
2
2
  <% dialog.with_show_button { "Click me" } %>
3
3
  <% dialog.with_feedback_message(icon_arguments: { icon: icon, color: icon_color }, loading: loading_state) do |message| %>
4
4
  <% message.with_heading(tag: :h2).with_content("Awesome!") %>
@@ -1,4 +1,4 @@
1
- <%= render(Primer::OpenProject::FeedbackDialog.new) do |dialog| %>
1
+ <%= render(Primer::OpenProject::FeedbackDialog.new(title: "Success message")) do |dialog| %>
2
2
  <% dialog.with_show_button { "Click me" } %>
3
3
  <% dialog.with_feedback_message do |message| %>
4
4
  <% message.with_heading(tag: :h2).with_content("Action successful") %>
@@ -1,4 +1,4 @@
1
- <%= render(Primer::OpenProject::FeedbackDialog.new(id: "my-dialog")) do |dialog| %>
1
+ <%= render(Primer::OpenProject::FeedbackDialog.new(id: "my-dialog", title: "Custom footer")) do |dialog| %>
2
2
  <% dialog.with_show_button { "Click me" } %>
3
3
  <% dialog.with_feedback_message do |message| %>
4
4
  <% message.with_heading(tag: :h2).with_content("Action successful") %>
@@ -5112,12 +5112,12 @@
5112
5112
  ]
5113
5113
  },
5114
5114
  {
5115
- "component": "OpenProject::DangerConfirmationDialog",
5115
+ "component": "OpenProject::DangerDialog",
5116
5116
  "status": "open_project",
5117
5117
  "a11y_reviewed": false,
5118
- "short_name": "OpenProjectDangerConfirmationDialog",
5119
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/danger_confirmation_dialog.rb",
5120
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/danger_confirmation_dialog/default/",
5118
+ "short_name": "OpenProjectDangerDialog",
5119
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/danger_dialog.rb",
5120
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/danger_dialog/default/",
5121
5121
  "parameters": [
5122
5122
  {
5123
5123
  "name": "form_arguments",
@@ -5131,6 +5131,24 @@
5131
5131
  "default": "`self.class.generate_id`",
5132
5132
  "description": "The id of the dialog."
5133
5133
  },
5134
+ {
5135
+ "name": "title",
5136
+ "type": "String",
5137
+ "default": "N/A",
5138
+ "description": "The title of the dialog. Although visually hidden, a label is rendered for assistive technologies."
5139
+ },
5140
+ {
5141
+ "name": "confirm_button_text",
5142
+ "type": "String",
5143
+ "default": "`nil`",
5144
+ "description": "The text of the confirm button. Will default to `I18n.t(\"button_delete\")`, or `I18n.t(\"button_delete_permanently\")` if `confirmation_check_box` slot has been passed to the component."
5145
+ },
5146
+ {
5147
+ "name": "cancel_button_text",
5148
+ "type": "String",
5149
+ "default": "`nil`",
5150
+ "description": "The text of the cancel button. Will default to `I18n.t(\"button_cancel\")`."
5151
+ },
5134
5152
  {
5135
5153
  "name": "system_arguments",
5136
5154
  "type": "Hash",
@@ -5140,12 +5158,12 @@
5140
5158
  ]
5141
5159
  },
5142
5160
  {
5143
- "component": "OpenProject::DangerConfirmationDialog::ConfirmationCheckBox",
5161
+ "component": "OpenProject::DangerDialog::ConfirmationCheckBox",
5144
5162
  "status": "open_project",
5145
5163
  "a11y_reviewed": false,
5146
- "short_name": "OpenProjectDangerConfirmationDialogConfirmationCheckBox",
5147
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/danger_confirmation_dialog/confirmation_check_box.rb",
5148
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/danger_confirmation_dialog/confirmation_check_box/default/",
5164
+ "short_name": "OpenProjectDangerDialogConfirmationCheckBox",
5165
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/danger_dialog/confirmation_check_box.rb",
5166
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/danger_dialog/confirmation_check_box/default/",
5149
5167
  "parameters": [
5150
5168
  {
5151
5169
  "name": "check_box_id",
@@ -5168,12 +5186,12 @@
5168
5186
  ]
5169
5187
  },
5170
5188
  {
5171
- "component": "OpenProject::DangerConfirmationDialog::FormWrapper",
5189
+ "component": "OpenProject::DangerDialog::FormWrapper",
5172
5190
  "status": "open_project",
5173
5191
  "a11y_reviewed": false,
5174
- "short_name": "OpenProjectDangerConfirmationDialogFormWrapper",
5175
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/danger_confirmation_dialog/form_wrapper.rb",
5176
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/danger_confirmation_dialog/form_wrapper/default/",
5192
+ "short_name": "OpenProjectDangerDialogFormWrapper",
5193
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/danger_dialog/form_wrapper.rb",
5194
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/danger_dialog/form_wrapper/default/",
5177
5195
  "parameters": [
5178
5196
 
5179
5197
  ]
@@ -5202,6 +5220,12 @@
5202
5220
  "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/feedback_dialog.rb",
5203
5221
  "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/feedback_dialog/default/",
5204
5222
  "parameters": [
5223
+ {
5224
+ "name": "title",
5225
+ "type": "String",
5226
+ "default": "N/A",
5227
+ "description": "The title of the dialog. Although visually hidden, a label is rendered for assistive technologies."
5228
+ },
5205
5229
  {
5206
5230
  "name": "system_arguments",
5207
5231
  "type": "Hash",
@@ -118,9 +118,9 @@
118
118
  "Primer::Navigation::TabComponent": "",
119
119
  "Primer::OpenProject::BorderGrid": "",
120
120
  "Primer::OpenProject::BorderGrid::Cell": "",
121
- "Primer::OpenProject::DangerConfirmationDialog": "",
122
- "Primer::OpenProject::DangerConfirmationDialog::ConfirmationCheckBox": "",
123
- "Primer::OpenProject::DangerConfirmationDialog::FormWrapper": "",
121
+ "Primer::OpenProject::DangerDialog": "",
122
+ "Primer::OpenProject::DangerDialog::ConfirmationCheckBox": "",
123
+ "Primer::OpenProject::DangerDialog::FormWrapper": "",
124
124
  "Primer::OpenProject::DragHandle": "",
125
125
  "Primer::OpenProject::FeedbackDialog": "",
126
126
  "Primer::OpenProject::FeedbackMessage": "",
@@ -1561,16 +1561,16 @@
1561
1561
  "Primer::OpenProject::BorderGrid::Cell": {
1562
1562
  "GeneratedSlotMethods": "Primer::OpenProject::BorderGrid::Cell::GeneratedSlotMethods"
1563
1563
  },
1564
- "Primer::OpenProject::DangerConfirmationDialog": {
1565
- "ConfirmationCheckBox": "Primer::OpenProject::DangerConfirmationDialog::ConfirmationCheckBox",
1566
- "FormWrapper": "Primer::OpenProject::DangerConfirmationDialog::FormWrapper",
1567
- "GeneratedSlotMethods": "Primer::OpenProject::DangerConfirmationDialog::GeneratedSlotMethods"
1564
+ "Primer::OpenProject::DangerDialog": {
1565
+ "ConfirmationCheckBox": "Primer::OpenProject::DangerDialog::ConfirmationCheckBox",
1566
+ "FormWrapper": "Primer::OpenProject::DangerDialog::FormWrapper",
1567
+ "GeneratedSlotMethods": "Primer::OpenProject::DangerDialog::GeneratedSlotMethods"
1568
1568
  },
1569
- "Primer::OpenProject::DangerConfirmationDialog::ConfirmationCheckBox": {
1570
- "GeneratedSlotMethods": "Primer::OpenProject::DangerConfirmationDialog::ConfirmationCheckBox::GeneratedSlotMethods"
1569
+ "Primer::OpenProject::DangerDialog::ConfirmationCheckBox": {
1570
+ "GeneratedSlotMethods": "Primer::OpenProject::DangerDialog::ConfirmationCheckBox::GeneratedSlotMethods"
1571
1571
  },
1572
- "Primer::OpenProject::DangerConfirmationDialog::FormWrapper": {
1573
- "GeneratedSlotMethods": "Primer::OpenProject::DangerConfirmationDialog::FormWrapper::GeneratedSlotMethods"
1572
+ "Primer::OpenProject::DangerDialog::FormWrapper": {
1573
+ "GeneratedSlotMethods": "Primer::OpenProject::DangerDialog::FormWrapper::GeneratedSlotMethods"
1574
1574
  },
1575
1575
  "Primer::OpenProject::DragHandle": {
1576
1576
  "DEFAULT_SIZE": "small",