From dc230ddb562cf6b5f5a6cb64f54989b394da3ab4 Mon Sep 17 00:00:00 2001 From: Zee <50284+zspencer@users.noreply.github.com> Date: Mon, 6 Mar 2023 18:26:15 -0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F=F0=9F=A7=B9=20`Component`?= =?UTF-8?q?s:=20Make=20`ButtonComponent`=20more=20Customizable=20(#1188)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - https://github.com/zinc-collective/convene/issues/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 --- .rubocop_todo.yml | 1 - app/components/button_component.html.erb | 10 ++++++++++ ...{icon_button_component.rb => button_component.rb} | 8 ++++++-- app/components/icon_button_component.html.erb | 10 ---------- app/furniture/marketplace/products/_product.html.erb | 2 +- .../_furniture_placement.html.erb | 4 ++-- app/views/invitations/_invitation.html.erb | 2 +- app/views/memberships/_membership.html.erb | 2 +- ...on_component_spec.rb => button_component_spec.rb} | 12 ++++++------ spec/components/previews/button_component_preview.rb | 5 +++++ 10 files changed, 32 insertions(+), 24 deletions(-) create mode 100644 app/components/button_component.html.erb rename app/components/{icon_button_component.rb => button_component.rb} (77%) delete mode 100644 app/components/icon_button_component.html.erb rename spec/components/{icon_button_component_spec.rb => button_component_spec.rb} (83%) create mode 100644 spec/components/previews/button_component_preview.rb diff --git a/.rubocop_todo.yml b/.rubocop_todo.yml index 01a3c47f7..3f878b97a 100644 --- a/.rubocop_todo.yml +++ b/.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' diff --git a/app/components/button_component.html.erb b/app/components/button_component.html.erb new file mode 100644 index 000000000..092b8ad26 --- /dev/null +++ b/app/components/button_component.html.erb @@ -0,0 +1,10 @@ +<%- if @disabled %> + <%= @label %> +<%- 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 %> diff --git a/app/components/icon_button_component.rb b/app/components/button_component.rb similarity index 77% rename from app/components/icon_button_component.rb rename to app/components/button_component.rb index 1b08c8975..13442fb54 100644 --- a/app/components/icon_button_component.rb +++ b/app/components/button_component.rb @@ -1,13 +1,14 @@ # 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 @@ -15,8 +16,11 @@ def initialize( @method = method @confirm = confirm @disabled = disabled + @classes = classes end + attr_accessor :classes + private def data diff --git a/app/components/icon_button_component.html.erb b/app/components/icon_button_component.html.erb deleted file mode 100644 index acd88361e..000000000 --- a/app/components/icon_button_component.html.erb +++ /dev/null @@ -1,10 +0,0 @@ -<%- if @disabled %> - <%= @label %> -<%- else %> - <%= link_to @label, - @href, - title: @title, - method: @method, - data: data, - class: 'no-underline bg-transparent hover:bg-primary-100 button' %> -<%- end %> diff --git a/app/furniture/marketplace/products/_product.html.erb b/app/furniture/marketplace/products/_product.html.erb index ddcda315b..60fe393aa 100644 --- a/app/furniture/marketplace/products/_product.html.erb +++ b/app/furniture/marketplace/products/_product.html.erb @@ -14,6 +14,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) %> diff --git a/app/views/furniture_placements/_furniture_placement.html.erb b/app/views/furniture_placements/_furniture_placement.html.erb index 104919a4f..46ef9053e 100644 --- a/app/views/furniture_placements/_furniture_placement.html.erb +++ b/app/views/furniture_placements/_furniture_placement.html.erb @@ -5,14 +5,14 @@ <%= furniture_placement.title %> <%- 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), diff --git a/app/views/invitations/_invitation.html.erb b/app/views/invitations/_invitation.html.erb index 90fea804e..f1f21fdf6 100644 --- a/app/views/invitations/_invitation.html.erb +++ b/app/views/invitations/_invitation.html.erb @@ -27,7 +27,7 @@ <%- if !invitation.revoked? && policy(invitation).destroy? %> - <%= render IconButtonComponent.new( + <%= render ButtonComponent.new( label: t('icons.remove'), href: [space, invitation], title: t('invitation.destroy'), diff --git a/app/views/memberships/_membership.html.erb b/app/views/memberships/_membership.html.erb index 2f71849cc..a5414f54e 100644 --- a/app/views/memberships/_membership.html.erb +++ b/app/views/memberships/_membership.html.erb @@ -33,7 +33,7 @@ <%- if policy(membership).destroy? %> - <%= render IconButtonComponent.new( + <%= render ButtonComponent.new( label: t('icons.remove'), href: [space, membership], title: t('memberships.delete'), diff --git a/spec/components/icon_button_component_spec.rb b/spec/components/button_component_spec.rb similarity index 83% rename from spec/components/icon_button_component_spec.rb rename to spec/components/button_component_spec.rb index 0f350e7da..dc156785e 100644 --- a/spec/components/icon_button_component_spec.rb +++ b/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 diff --git a/spec/components/previews/button_component_preview.rb b/spec/components/previews/button_component_preview.rb new file mode 100644 index 000000000..8d5afdc28 --- /dev/null +++ b/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