From 384ad63ac46f28792064be70b1165b83666045b4 Mon Sep 17 00:00:00 2001
From: Zee Spencer <50284+zspencer@users.noreply.github.com>
Date: Sat, 13 Jan 2024 22:20:43 -0800
Subject: [PATCH] `CardComponent`: Gray the Footer, pull Classes into HTML

---
 app/components/card_component.html.erb |  8 +++---
 app/components/card_component.rb       | 34 ++++++--------------------
 2 files changed, 12 insertions(+), 30 deletions(-)

diff --git a/app/components/card_component.html.erb b/app/components/card_component.html.erb
index d6c11f364..399bf1500 100644
--- a/app/components/card_component.html.erb
+++ b/app/components/card_component.html.erb
@@ -1,6 +1,6 @@
-<div <%==attributes(classes: card_classes_wrapper) %>>
+<div <%==attributes(classes: "shadow rounded-lg bg-white group-hover:bg-slate-50 flex flex-col justify-between #{header_classes}") %>>
  <% if header? %>
-  <header>
+  <header class="p-2 sm:p-4">
     <%= header%>
   </header>
 
@@ -9,12 +9,12 @@
     NOTE: content? is not always working as described, and is returning a proc in some cases rather than a boolean
   %>
   <% if content.present? %>
-    <div class="<%== card_classes_content %>">
+    <div class="flex flex-col h-full justify-between p-2 sm:p-4 <%= content_classes%>">
       <%= content %>
     </div>
   <% end %>
   <% if footer? %>
-    <div class="<%== card_classes_footer %>">
+    <div class="bg-slate-50 p-2 sm:p-4 <%= "rounded-t-none" if content.blank? %> <%= footer_classes %>">
       <%= footer %>
     </div>
   <% end %>
diff --git a/app/components/card_component.rb b/app/components/card_component.rb
index 53c948c08..4ddfeecc1 100644
--- a/app/components/card_component.rb
+++ b/app/components/card_component.rb
@@ -1,33 +1,15 @@
 class CardComponent < ApplicationComponent
-  renders_one :header
-  renders_one :footer
+  attr_accessor :wrapper_classes
 
-  private
+  renders_one :header
+  attr_accessor :header_classes
 
-  def card_classes_content
-    [
-      "p-4",
-      "sm:p-6"
-    ].compact.join(" ")
-  end
+  attr_accessor :content_classes
 
-  def card_classes_wrapper
-    [
-      "shadow",
-      "rounded-lg",
-      "h-full",
-      "bg-white",
-      "group-hover:bg-slate-50"
-    ].compact.join(" ")
-  end
+  renders_one :footer
+  attr_accessor :footer_classes
 
-  def card_classes_footer
-    [
-      "bg-orange-50",
-      "p-4",
-      "sm:p-6",
-      # content? is not always working as described, and is returning a proc in some cases rather than a boolean
-      ("rounded-t-none" if content.blank?)
-    ].compact.join(" ")
+  def initialize(header_classes: "", content_classes: "", wrapper_classes: "", **kwargs)
+    super(**kwargs)
   end
 end