Modal ViewComponent

modal_component.html.erb

<div class="modal fade" id="<%= dom_id %>" role="dialog" tabindex="-1">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <% if header %>
        <div class="modal-header">
          <%= header %>
          <%- if header_close_btn %>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <i class="fa fa-times-circle"></i>
            </button>
          <%- end %>
        </div>
      <% end %>
      <div class="modal-body">
        <%= content %>
      </div>
      <% if footer %>
        <div class="modal-footer">
          <%= footer %>
        </div>
      <% end %>
    </div>
  </div>
</div>

<%- if open %>
  <script>
    new bsModal(document.getElementById("<%= dom_id %>"))
  </script>
<%- end %>

modal_component.rb

# frozen_string_literal: true

class ModalComponent < ViewComponent::Base
  with_content_areas :header, :footer
  attr_accessor :dom_id, :open, :header_close_btn

  def initialize(dom_id:, open: true, header_close_btn: true)
    self.dom_id ||= "modal-#{SecureRandom.hex(12)}"
    self.open = open
    self.header_close_btn = header_close_btn
  end
end

usage.html.erb

<%= render ModalComponent.new(open: true) do |c| %>
  <%- c.header do %>
    Hello World!
  <%- end %>

  <%- c.footer do %>
    Some Footer Content
  <%- end %>

  Everything else in this block gets printed to the default slot `content`

<%- end %>