🛠️🧹 Components: Make ButtonComponent more Customizable (#1188)

- #1187

While attempting to use the `IconButtonComponent` for the
`Marketplace::Cart::DeliveryAddress#update` flow, we realized we didn't
have the affordances we needed to adjust the component.

So we introduced a constructor parameter for setting arbitrary classes
on the component, which makes it possible for us to adjust the
padding/text/background/etc.

🛠️🧹 `Component`: rename `IconButtonComponent`

It seems like `ButtonComponent` is a more appropriate name, given that:

- It doesn't have any `Icon` *specific* behavior and
- It's shorter

Co-authored-by: Naomi Quinones <[email protected]>

.rubocop_todo.yml

@@ -75,7 +75,6 @@ RSpec/LetSetup:
 # SupportedStyles: always, named_only
 RSpec/NamedSubject:
   Exclude:
-    - 'spec/components/icon_button_component_spec.rb'
     - 'spec/models/authentication_method_spec.rb'
     - 'spec/models/invitation_spec.rb'
     - 'spec/models/membership_spec.rb'

app/components/button_component.html.erb

@@ -0,0 +1,10 @@
+<%- if @disabled %>
+  <span class="no-underline bg-transparent hover:bg-primary-100 text-gray-700 button #{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}" %>
+<%- end %>

app/components/icon_button_component.rb → app/components/button_component.rb

@@ -1,22 +1,26 @@
 # frozen_string_literal: true
 
-class IconButtonComponent < ViewComponent::Base
+class ButtonComponent < ViewComponent::Base
   def initialize(
     label:,
     title:,
     href:,
     method: :put,
     confirm: nil,
-    disabled: false
+    disabled: false,
+    classes: nil
   )
     @label = label
     @title = title
     @href = href
     @method = method
     @confirm = confirm
     @disabled = disabled
+    @classes = classes
   end
 
+  attr_accessor :classes
+
   private
 
   def data

app/furniture/marketplace/products/_product.html.erb

@@ -14,6 +14,6 @@
   </td>
   <td class="py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
     <%= render "buttons/edit", label: "#{t('icons.pencil')}",  title: t('.edit'), href: product.location(:edit), method: :get %>
-    <%= render IconButtonComponent.new(label: t('icons.remove'), title: t('.remove'), href: product.location, method: :delete) %>
+    <%= render ButtonComponent.new(label: t('icons.remove'), title: t('.remove'), href: product.location, method: :delete) %>
   </td>
 </tr>

app/views/furniture_placements/_furniture_placement.html.erb

@@ -5,14 +5,14 @@
         <%= furniture_placement.title %>
       </h4>
       <%- if furniture_placement.configurable? %>
-        <%= render IconButtonComponent.new(
+        <%= render ButtonComponent.new(
                       label: t('icons.edit'),
                       href: [:edit, furniture_placement.room.space, furniture_placement.room, furniture_placement],
                       method: :get,
                       title: t('.edit_title', name: furniture_placement.furniture.model_name.human.titleize)) %>
       <%- end %>
 
-      <%= render IconButtonComponent.new(
+      <%= render ButtonComponent.new(
                     label: t('icons.remove'),
                     href: [furniture_placement.room.space, furniture_placement.room, furniture_placement],
                     title: t('.remove_title', name: furniture_placement.furniture.model_name.human.titleize),

app/views/invitations/_invitation.html.erb

@@ -27,7 +27,7 @@
   </td>
   <td class="py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
     <%- if !invitation.revoked? && policy(invitation).destroy?  %>
-      <%= render IconButtonComponent.new(
+      <%= render ButtonComponent.new(
                    label: t('icons.remove'),
                    href: [space, invitation],
                    title: t('invitation.destroy'),

app/views/memberships/_membership.html.erb

@@ -33,7 +33,7 @@
   </td>
   <td class="py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
     <%- if policy(membership).destroy?  %>
-      <%= render IconButtonComponent.new(
+      <%= render ButtonComponent.new(
                    label: t('icons.remove'),
                    href: [space, membership],
                    title: t('memberships.delete'),

spec/components/icon_button_component_spec.rb → spec/components/button_component_spec.rb

@@ -2,14 +2,14 @@
 
 require "rails_helper"
 
-RSpec.describe IconButtonComponent, type: :component do
-  describe "render" do
-    subject { render_inline(component) }
+RSpec.describe ButtonComponent, type: :component do
+  describe "#render" do
+    subject(:output) { render_inline(component) }
 
     let(:component) { described_class.new(**params) }
     let(:params) { {label: "Some label", title: "Our Title", href: "somewhere.com"} }
 
-    let(:a_el) { subject.at_css("a") }
+    let(:a_el) { output.at_css("a") }
 
     it "renders a link with the given arguments" do
       expect(a_el).to be_present
@@ -45,8 +45,8 @@
       end
 
       it "renders a span with the label" do
-        expect(subject.at_css("span")).to be_present
-        expect(subject.at_css("span").text).to eq("Some label")
+        expect(output.at_css("span")).to be_present
+        expect(output.at_css("span").text).to eq("Some label")
       end
     end
   end

spec/components/previews/button_component_preview.rb

@@ -0,0 +1,5 @@
+class ButtonComponentPreview < ViewComponent::Preview
+  def test
+    render(ButtonComponent.new(label: "Awooo!", title: "gaaa!", href: "#"))
+  end
+end