Refactor: move basic modal styles to generic parent component

The style was already being shared with a sibling component.

Now we can instantiate a plain old 'modal'.

app/components/confirm_modal_component/confirm_modal_component.html.haml

@@ -1,6 +1,6 @@
 %div{ id: @id, "data-controller": "modal #{@controller}", "data-action": "keyup@document->modal#closeIfEscapeKey", "data-#{@controller}-reflex-value": @reflex }
   .reveal-modal-bg.fade{ "data-modal-target": "background", "data-action": "click->modal#close" }
-  .reveal-modal.fade.tiny.help-modal{ "data-modal-target": "modal" }
+  .reveal-modal.fade.tiny.modal-component{ "data-modal-target": "modal" }
     = content
 
     = render @message if @message

app/components/help_modal_component/help_modal_component.html.haml

@@ -1,6 +1,6 @@
 %div{ id: @id, "data-controller": "help-modal", "data-action": "keyup@document->help-modal#closeIfEscapeKey" }
   .reveal-modal-bg.fade{ "data-help-modal-target": "background", "data-action": "click->help-modal#close" }
-  .reveal-modal.fade.small.help-modal{ "data-help-modal-target": "modal" }
+  .reveal-modal.fade.small.modal-component{ "data-help-modal-target": "modal" }
     = content
 
     - if close_button?

app/components/modal_component/modal_component.html.haml

@@ -0,0 +1,8 @@
+%div{ id: @id, "data-controller": "modal", "data-action": "keyup@document->modal#closeIfEscapeKey" }
+  .reveal-modal-bg.fade{ "data-modal-target": "background", "data-action": "click->modal#close" }
+  .reveal-modal.fade.small.modal-component{ "data-modal-target": "modal" }
+    = content
+
+    - if close_button?
+      .text-center
+        %input{ class: "button icon-plus #{close_button_class}", type: 'button', value: t('js.admin.modals.close'), "data-action": "click->modal#close" }

app/components/modal_component/modal_component.scss

@@ -1,4 +1,5 @@
-.help-modal {
+// class name 'modal' is already taken by 'custom-alert' and 'custom-confirm'.
+.modal-component {
   visibility: visible;
   position: fixed;
   top: 3em;

app/views/spree/admin/orders/bulk/_invoice_modal.html.haml

@@ -1,6 +1,6 @@
 %div{ id: "bulk_invoices_modal", "data-controller": "modal", "data-modal-instant-value": true, "data-action": "keyup@document->modal#closeIfEscapeKey" }
   .reveal-modal-bg.fade{ "data-modal-target": "background", "data-action": "click->modal#remove" }
-  .reveal-modal.fade.tiny.help-modal{ "data-modal-target": "modal" }
+  .reveal-modal.fade.tiny.modal-component{ "data-modal-target": "modal" }
     %div.fullwidth.align-center
       %h4.modal-title
         = t('js.admin.orders.index.compiling_invoices')

app/webpacker/css/admin/all.scss

@@ -124,6 +124,6 @@
 @import "~tom-select/src/scss/tom-select.default";
 @import "components/tom_select";
 
-@import "app/components/help_modal_component/help_modal_component";
+@import "app/components/modal_component/modal_component";
 @import "app/components/confirm_modal_component/confirm_modal_component";
 @import "app/webpacker/css/admin/trix.scss";

app/webpacker/css/admin_v3/all.scss

@@ -128,7 +128,7 @@
 @import "~tom-select/src/scss/tom-select.default";
 @import "components/tom_select"; // admin_v3
 
-@import "app/components/help_modal_component/help_modal_component";
+@import "app/components/modal_component/modal_component";
 @import "app/components/confirm_modal_component/confirm_modal_component";
 @import "app/components/vertical_ellipsis_menu/component"; // admin_v3 and only V3
 @import "app/webpacker/css/admin/trix.scss";

app/webpacker/css/darkswarm/all.scss

@@ -77,5 +77,5 @@ ofn-modal {
 @import "../shared/question-mark-icon";
 @import '../admin/shared/scroll_bar';
 
-@import 'app/components/help_modal_component/help_modal_component';
+@import 'app/components/modal_component/modal_component';
 @import 'app/components/confirm_modal_component/confirm_modal_component';

spec/javascripts/stimulus/help_modal_controller_test.js

@@ -34,7 +34,7 @@ describe("HelpModalController", () => {
              data-action="click->help-modal#close">
         </div>
         <div id="modal"
-             class="reveal-modal.fade.medium.help-modal"
+             class="reveal-modal.fade.medium.modal-component"
              data-help-modal-target="modal">
           Hello world
           <a id="close-link" data-action="click->help-modal#close">Close</a>

spec/system/admin/enterprise_roles_spec.rb

@@ -149,7 +149,7 @@ create(:enterprise)
       end
 
       xit "can invite unregistered users to be managers" do
-        find('a.button.help-modal').click
+        find('a.button.modal').click
         expect(page).to have_css '#invite-manager-modal'
 
         within '#invite-manager-modal' do