Merge pull request #1144 from sul-dlss/flash

Extract a flash view_component

app/assets/stylesheets/application.css

@@ -15,10 +15,6 @@
 #main-container {
   /* keep the not available items with sufficent height. See db586ns4974 */
   min-height: calc(100vh - 323px);
-
-  #main-flashes {
-    min-height: 0;
-  }
 }
 
 .purl-embed-viewer {

app/components/flash_message_component.html.erb

@@ -0,0 +1,9 @@
+<% each_type do |value, alert_class| %>
+  <div role="alert" class="alert <%= alert_class %> d-flex shadow-sm align-items-center alert-dismissible mt-3">
+    <div class="bi bi-exclamation-triangle-fill fs-3 me-3 align-self-center d-flex justify-content-center"></div>
+    <div class="text-body">
+      <div><%= value.html_safe %></div>
+    </div>
+    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+  </div>
+<% end %>

app/components/flash_message_component.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+class FlashMessageComponent < ViewComponent::Base
+  TYPES = [:success, :notice, :error, :alert].freeze
+
+  def initialize(flash:)
+    @flash = flash
+    super
+  end
+
+  def render?
+    !@flash.empty?
+  end
+
+  def each_type
+    TYPES.each do |level|
+      yield @flash[level], bs_class(level) if @flash[level]
+    end
+  end
+
+  def bs_class(level)
+    case level
+    when :success then 'alert-success'
+    when :notice  then 'alert-info'
+    when :alert   then 'alert-warning'
+    when :error   then 'alert-danger'
+    else "alert-#{level}"
+    end
+  end
+end

app/views/layouts/application.html.erb

@@ -64,7 +64,7 @@
     </header>
 
     <main id="main-container" class="container">
-      <%= render partial: '/flash_msg', layout: 'shared/flash_messages' %>
+      <%= render FlashMessageComponent.new(flash:) %>
       <%= yield %>
     </main>
     <%= render 'shared/su_footer' %>