🌸🛠️🧹 Marketplace: Tidy up Marketplace#show

- #1326
- #1187

- 🛠️ `Components`: Makes sure Tailwind notices `Furniture`'s `Component` files

- 🧹 `Components` I'm not sure if this is the right path or not but it decouples our
  `ButtonComponent` from the `button.scss` file, and makes it a bit
  easier to override the defaults for how we present buttons.

- 🌸 Gets rid of the extra
  `Marketplace::Cart::Delivery::EditButtonComponent` that hangs out
  underneath the cart

- 🌸 Tailors the `Marketplace::Cart::Delivery::EditButtonComponent`
  better for smaller screens.

app/components/button_component.html.erb

@@ -1,10 +1,10 @@
 <%- if @disabled %>
-  <span class="no-underline bg-transparent hover:bg-primary-100 text-gray-700 button #{classes}"><%= @label %></span>
+  <span class="<%= classes %>"><%= @label %></span>
 <%- else %>
   <%= link_to @label,
               @href,
               title: @title,
               method: @method,
               data: data,
-              class: "no-underline bg-transparent hover:bg-primary-100 text-gray-700 button #{classes}" %>
+              class: classes %>
 <%- end %>

app/components/button_component.rb

@@ -1,14 +1,21 @@
 # frozen_string_literal: true
 
 class ButtonComponent < ViewComponent::Base
+  attr_accessor :margin, :padding, :shape, :typography, :color, :animation
+
   def initialize(
     label:,
     title:,
     href:,
     method: :put,
     confirm: nil,
     disabled: false,
-    classes: nil,
+    animation: "transition ease-in-out duration-150",
+    color: "bg-transparent bg-transparent hover:bg-primary-100 text-gray-700",
+    margin: "my-1",
+    padding: "py-2 px-4",
+    typography: "no-underline text-center font-bold",
+    shape: "rounded",
     turbo_stream: false
   )
     @label = label
@@ -17,11 +24,18 @@ def initialize(
     @method = method
     @confirm = confirm
     @disabled = disabled
-    @classes = classes
+    self.animation = animation
+    self.color = color
+    self.margin = margin
+    self.padding = padding
+    self.shape = shape
+    self.typography = typography
     @turbo_stream = turbo_stream
   end
 
-  attr_accessor :classes
+  def classes
+    [animation, color, margin, padding, shape, typography].compact.join(" ")
+  end
 
   private
 

app/furniture/marketplace/cart/deliveries/_delivery.html.erb

@@ -1,7 +1,8 @@
-<div id="<%=dom_id(delivery) %>">
-  <div class="flex flex-wrap items-center justify-between text-sm">
-    <span>Delivering to: <%= render(delivery.delivery_area) if delivery.delivery_area.present? %></span>
+<div id="<%=dom_id(delivery) %>" class="flex flex-wrap items-center justify-between text-sm mt-1 sm:mt-2">
+  <span>
+    <span class="font-bold">Delivering to:</span>
+    <%= render(delivery.delivery_area) if delivery.delivery_area.present? %>
+  </span>
 
-    <%= render Marketplace::Cart::Delivery::EditButtonComponent.new(delivery) %>
-  </div>
+  <%= render Marketplace::Cart::Delivery::EditButtonComponent.new(delivery) %>
 </div>

app/furniture/marketplace/cart/delivery/edit_button_component.rb

@@ -3,11 +3,17 @@ class Cart
     class Delivery
       class EditButtonComponent < ButtonComponent
         attr_accessor :delivery
-        def initialize(delivery,
-          classes: "w-full sm:w-auto font-light text-xs m-0 bg-primary-200 underline",
-          label: t("marketplace.cart.deliveries.edit.link_to"))
+        def initialize(delivery, label: t("marketplace.cart.deliveries.edit.link_to"),
+          shape: "w-full sm:w-auto rounded",
+          margin: "mb-1 mt-1 sm:mt-0",
+          typography: "no-underline font-normal text-sm text-center",
+          color: "bg-primary-100 hover:bg-primary-200 focus:bg-primary-200",
+          **kwargs)
           self.delivery = delivery
-          super(method: :get, href: delivery.location(:edit), label: label, turbo_stream: true, title: nil, classes: classes)
+          super(href: delivery.location(:edit), label: label, title: nil,
+                method: :get, turbo_stream: true,
+                margin: margin, typography: typography, color: color,
+                shape: shape, **kwargs)
         end
       end
     end

app/furniture/marketplace/carts/_cart.html.erb

@@ -1,5 +1,5 @@
 <div id="<%= dom_id(cart) %>">
-  <div class="-mx-4 mt-4 overflow-hidden shadow ring-1 ring-black ring-opacity-5 sm:-mx-6 md:mx-0 md:rounded-lg">
+  <div class="mt-2 overflow-hidden shadow ring-1 ring-black ring-opacity-5 rounded-lg">
     <table class="min-w-full divide-y divide-gray-300 table-fixed">
       <thead class="bg-gray-50">
         <tr>
@@ -24,13 +24,12 @@
     </table>
   </div>
 
-  <p class="text-right py-2 text-sm">
+  <p class="text-right px-2 sm:px-4 py-2 text-sm">
     <%- if cart.marketplace.delivery_window.present? %>
       Orders placed by <%= cart.marketplace.order_by %>
       are delivered on <%= cart.marketplace.delivery_window %>
     <%- elsif cart.delivery_window.present? %>
       Place orders <%= cart.marketplace.order_by %> to ensure an on-time delivery for <%= render(cart.delivery_window) %>
-      <%= render Marketplace::Cart::Delivery::EditButtonComponent.new(cart.delivery) %>
     <%- end %>
   </p>
 </div>

tailwind.config.cjs

@@ -2,7 +2,7 @@ const colors = require('tailwindcss/colors')
 
 module.exports = {
   content: [
-    './app/furniture/**/*.html.erb',
+    './app/furniture/**/*{_component.rb,.html.erb}',
     './app/utilities/**/*.html.erb',
     './app/views/**/*.html.erb',
     './app/components/**/*.{erb,rb}',