Fix test and refactor

Author: Mihai-Munteanu

app/assets/stylesheets/css/components/ui/dropdown.css

@@ -56,7 +56,7 @@
     @apply text-content-secondary gap-1.5;
 
     &.dropdown-menu__item--disabled {
-      @apply opacity-60 pointer-events-none;
+      @apply opacity-60;
     }
   }
 
@@ -75,11 +75,7 @@
 
 .dropdown-menu__item:focus-visible,
 .dropdown-menu__list > :is(a, button):focus-visible {
-  @apply ring-2 ring-inset ring-content bg-primary outline-none;
-
-  &.menu__item--action {
-    @apply ring-info-foreground;
-  }
+  @apply ring-2 ring-inset ring-info-foreground bg-primary outline-none;
 }
 
 .dropdown-menu__icon,

app/assets/stylesheets/css/components/ui/dropdown_card.css

@@ -1,8 +1,8 @@
 .dropdown-card {
-  @apply flex w-full flex-col items-stretch overflow-hidden rounded-lg border border-tertiary bg-secondary p-0.5;
+  @apply overflow-hidden rounded-lg border border-tertiary bg-secondary p-0.5;
   box-shadow: var(--box-shadow-dropdown-card);
 }
 
 .dropdown-card__body {
-  @apply w-full min-w-0 overflow-hidden rounded-lg border border-tertiary bg-primary;
+  @apply overflow-hidden rounded-lg border border-tertiary bg-primary;
 }

app/components/avo/u_i/dropdown_card_component.html.erb

@@ -1,18 +1,9 @@
-<%= content_tag :div, class: class_names(
-  "dropdown-card",
-  @classes
-) do %>
-  <% if header? %>
-    <%= header %>
-  <% end %>
+<%= content_tag :div, class: class_names("dropdown-card", @classes) do %>
+  <%= header %>
 
-  <% if body? %>
-    <div class="dropdown-card__body">
-      <%= body %>
-    </div>
-  <% end %>
+  <div class="dropdown-card__body">
+    <%= body %>
+  </div>
 
-  <% if footer? %>
-    <%= footer %>
-  <% end %>
+  <%= footer %>
 <% end %>

spec/components/avo/u_i/dropdown_card_component_spec.rb

@@ -10,10 +10,9 @@
       end
 
       expect(page).to have_css(".dropdown-card")
-      expect(page).to have_css(".dropdown-card__header", text: "Header content")
-      expect(page).to have_css(".dropdown-card__body")
-      expect(page).to have_css(".dropdown-card__content", text: "Body content")
-      expect(page).to have_css(".dropdown-card__footer", text: "Footer content")
+      expect(page).to have_css(".dropdown-card", text: /Header content/)
+      expect(page).to have_css(".dropdown-card__body", text: "Body content")
+      expect(page).to have_css(".dropdown-card", text: /Footer content/)
     end
 
     it "renders without header and footer when those slots are not provided" do
@@ -22,9 +21,7 @@
       end
 
       expect(page).to have_css(".dropdown-card")
-      expect(page).not_to have_css(".dropdown-card__header")
-      expect(page).not_to have_css(".dropdown-card__footer")
-      expect(page).to have_css(".dropdown-card__content", text: "Only body")
+      expect(page).to have_css(".dropdown-card__body", text: "Only body")
     end
 
     it "renders with header and body only" do
@@ -33,9 +30,8 @@
         c.with_body { "Body content" }
       end
 
-      expect(page).to have_css(".dropdown-card__header", text: "Header only")
-      expect(page).to have_css(".dropdown-card__content", text: "Body content")
-      expect(page).not_to have_css(".dropdown-card__footer")
+      expect(page).to have_css(".dropdown-card", text: /Header only/)
+      expect(page).to have_css(".dropdown-card__body", text: "Body content")
     end
 
     it "renders with footer and body only" do
@@ -44,9 +40,8 @@
         c.with_footer { "Footer only" }
       end
 
-      expect(page).not_to have_css(".dropdown-card__header")
-      expect(page).to have_css(".dropdown-card__content", text: "Body content")
-      expect(page).to have_css(".dropdown-card__footer", text: "Footer only")
+      expect(page).to have_css(".dropdown-card__body", text: "Body content")
+      expect(page).to have_css(".dropdown-card", text: /Footer only/)
     end
 
     it "applies extra classes via the classes prop" do